<template>
  <div class="tr-filter" ref="filterDiv" tabIndex="-1">
    <div class="row">
      <div class="col filter-panel">
        <div style="display: flex;justify-content: space-between;    align-items: start;" v-if="this.FilterIsClassic && isShowTopContent==='1'">
          <!-- 经典模式条件显示框 style="padding-top: 2px;"-->
          <div class="filter-values-panel" >
            <span style="position: relative;display: none;">
              <!-- {{isResponsiveSize}} -->

            </span>
            <el-popover v-if="showShortcutCondition == 1" placement="bottom" trigger="click" :visible="FilterMenuIsShow"
              ref={menuContent} fit width='auto' popper-style="padding:0;z-index:1000">
              <div @click.stop.prevent="stopPropagationByFilter" @mouseenter="stopclosePanel"   class='tr-filter-menu-classic tr-filter'
                :class="{ 'tr-filter-menu-classic-show': true }" v-if="FilterMenuIsShow">
                <span :class="[
                  'filter-groups-panel',
                  !!FilterIsClassic ? 'block-panel' : '',
                ]">
                  <draggable :modelValue="computedGroups" @update:modelValue="v => $emit('update:Groups', v)"
                    @change="v => console.log('change', v)" @start="FilterDragging = true" @end="FilterDragging = false"
                    item-key="ID" :filter="isMobile ? '.filter-item-drag-handle' : ''" :move="onMove"
                    style="display: inline" :style="{ width: computedPanelWidth }">
                    <template #item="{ element, index }">
                      <FilterGroup :key="element.ID" :Group="element" @focusFilterDivDelayed="focusFilterDivDelayed"
                        @update:GroupChild="({ GroupIndex, index, value }) =>
                          $emit('update:GroupChild', { GroupIndex, index, value })
                          " @update:Group="value => $emit('update:Group', { index, value })" :Groups="Groups"
                        @update:Groups="value => $emit('update:Groups', value)" :GroupIndex="index" :Fields="Fields"
                        :Mappings="Mappings" :Conditions="Conditions" :FilterIsEasy="FilterIsEasy"
                        :FilterIsClassic="FilterIsClassic" :IsOuter="true" :InitValueScript="InitValueScript"
                        :tabIndex="tabIndex" :class="[
                          index == 0 ? 'filter-group-first' : '',
                          !!FilterIsClassic
                            ? 'el-col-' +
                            (isMobile ? 24 : element.ColNum || 6) +
                            ' filter-group-classic'
                            : 'filter-groups-item-panel',
                        ]"
                         :enableHelpTip="element.enableHelpTip"
                        :helpTipPlacement="element.helpTipPlacement"
                        :helpTipContext ="element.helpTipContext"
                        >
                      </FilterGroup>
                    </template>
                  </draggable>


                  <!-- 经典模式操作按钮组 -->
                  <span class="filter-opers-panel" style="padding: 24px 0 16px 0" v-if="!!this.FilterIsClassic">
                    <!-- 经典模式查询按钮 -->
                    <!-- icon="search" -->
                    <t-button ref="query" class="tr-button-primary"  :tabIndex="tabIndex" :show-hint="true"
                      :title="Term.placeHolder.query" :label="Term.placeHolder.query"
                      @click="FilterMenuIsShow = false; filterQuery()">
                    </t-button>

                    <!-- 经典模式清空按钮 icon="clear" -->
                    <t-button ref="clear" style="margin-left: 12px"  :label="Term.placeHolder.clear"
                      class="tr-button-default" :tabIndex="tabIndex" :show-hint="true" :title="Term.title.clearAll"
                      @click="clearQuery" />
                    <t-button ref="clear" style="margin-left: 12px" icon="grid_view" :label="Term.placeHolder.filterSet"
                      class="tr-button-default" :tabIndex="tabIndex" :show-hint="true"
                      :title="Term.placeHolder.filterSet" @click=" ConfigGroups = GetConfigGroups();
                      FilterDrawer = true;
                      operateTopPopover = false;" />

                  </span>
                </span>
              </div>
              <template #reference>
                <i class='fas dx-icon icon-t-filter '
                  :class="showFasrFilterMark?'fasr_filter_mark':''"
                  :style="FiltersIsShow ? 'color:rgba(0,0,0,.32);cursor:not-allowed' : ''"
                  style="position:relative;cursor: pointer;    height: 32px;width: 20px;line-height: 32px;text-align: center;" @click="openPanel" @mouseenter="onlyOpenPanel"  @mouseleave="onlyClosePanel"/>
              </template>
            </el-popover>
            <span class="filter-values-text" v-show="false">{{ this.Term.placeHolder.currFilters }}:</span>
            <span class="filter-values-item" :class="{ 'filter-values-item__mobile': isMobile }"
              v-for="(item, index) in computedValuesGroups" :key="item.ID">
              <span>
                <span class="filter-values-item-text" v-html="getValueLabelText(item)"></span>
                <span class="filter-values-item-oper" @click="clearFilterValue(item.Code)"
                  :title="getTermsValue('deleteItem')">
                  <i class='fas dx-icon icon-t-close-circle-fill '
                    style="font-size: 14px;color:rgba(0,0,0,.32);cursor: pointer;"></i>
                  <!-- <t-icon name="clear" size="14px"></t-icon> -->
                </span>
              </span>
            </span>
             <span v-if="this.computedValuesGroups.length > 0 && operatePosition==='1'" class="filter-values-item-clear"
            @click="clearQuery" @keyup.enter="clearQuery" :title="this.Term.title.clearAll" :tabIndex="tabIndex">
            {{ this.Term.placeHolder.clear }}
          </span>
          <!-- 20241209 改版隐藏清空按钮 刁春辉 -->
          <span class="filter-values-item-clear" v-if="operatePosition==='1'&&isShowCollapse=='1'" @click="shiftFiltersFlod" @keyup.enter="shiftFiltersFlod"
            :tabIndex="tabIndex" :title="this.FiltersIsShow
              ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
              : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
              ">
            {{
              this.FiltersIsShow
                ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
                : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
            }}
            <i style="font-size:10px !important" :class="`q-icon fas dx-icon icon-t-arrow-${!FiltersIsShow?'down':'up'} t-icon`"></i>
          </span>
          </div>
          <div class="filter-values-panel" v-if="operatePosition==='0'" style="flex: none;">
            <!-- 经典模式查询按钮 -->
            <t-button ref="query" class="tr-button-primary" :tabIndex="tabIndex" :show-hint="true"
              :title="Term.placeHolder.query" :label="Term.placeHolder.query"
              @click="FilterMenuIsShow = false; filterQuery()">
            </t-button>
            <!-- 经典模式清空按钮 -->
            <t-button ref="clear" :label="Term.placeHolder.clear" class="tr-button-default" :tabIndex="tabIndex"
              :show-hint="true" :title="Term.title.clearAll" @click="clearQuery" />
            <el-popover
              v-if="(isShowOperateCellButton==1&&(FiltersIsShow || (!FiltersIsShow && (!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1))))"
              placement="bottom" trigger="click" :visible="operateTopPopover" fit width='auto' popper-style="padding:0">
              <div class="tr-filter-menu row no-wrap q-pa-md" @click="stopPropagationByFilter">
                <div class="column">
                  <div class="operateMore">
                    <div
                      v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                      class="title z-readonly" style="margin-top: 0px" @mouseenter="hideLayoutMenu"
                      :data-mode="FilterModel">
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                  " name="grid_view" size="14px"></t-icon>{{ this.Term.moreOperate.modeSelect }}
                    </div>

                    <div class="m-list" style="padding: 4px 8px" @mouseenter="hideLayoutMenu"
                      v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)">
                      <div class="item" v-if="getStatus('Easy').show"
                        :style="getStatus('Easy').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                        <t-radio :disable="getStatus('Easy').readonly" class="tr-radio-group-small"
                          v-model="FilterModel_Data" :tabIndex="tabIndex" val="Easy" size="xs" />
                        <span :disable="getStatus('Easy').readonly" style="margin-left: 8px"
                          @click="FilterModel_Data = 'Easy'">{{
                            Term.field.simpleMode
                          }}</span>
                      </div>
                      <div class="item" v-if="getStatus('Comp').show"
                        :style="getStatus('Comp').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                        <t-radio :disable="getStatus('Comp').readonly" class="tr-radio-group-small" :tabIndex="tabIndex"
                          v-model="FilterModel_Data" val="Comp" size="xs" />
                        <span :disable="getStatus('Comp').readonly" style="margin-left: 8px"
                          @click="FilterModel_Data = 'Comp'">{{
                            Term.field.complexMode
                          }}</span>
                      </div>
                      <div class="item" v-if="getStatus('Classic').show"
                        :style="getStatus('Classic').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                        <t-radio :disable="getStatus('Classic').readonly" class="tr-radio-group-small"
                          :tabIndex="tabIndex" v-model="FilterModel_Data" val="Classic" size="xs" />
                        <span :disable="getStatus('Classic').readonly" style="margin-left: 8px"
                          @click="FilterModel_Data = 'Classic'">{{
                            Term.field.classicModel
                          }}</span>
                      </div>
                    </div>

                    <t-separator
                      v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                      v-show="FiltersIsShow || !FilterIsClassic" style="margin: 4px 0 8px 0"
                      @mouseenter="hideLayoutMenu"></t-separator>

                    <div v-show="FiltersIsShow || !FilterIsClassic" class="title" :tabIndex="tabIndex" @keyup.enter="
                      ConfigGroups = GetConfigGroups();
                    FilterDrawer = true;
                    operateTopPopover = false;
                    " @click="
                      ConfigGroups = GetConfigGroups();
                    FilterDrawer = true;
                    operateTopPopover = false;
                    " style="cursor: pointer">
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                  " name="grid_view" size="14px"></t-icon>{{ Term.placeHolder.filterSet }}
                    </div>

                    <div v-show="FiltersIsShow || !FilterIsClassic" class="title" :tabIndex="tabIndex"
                      style="margin-bottom: 0; cursor: pointer" v-if="!isMobile">
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                  " name="settings" size="14px"></t-icon><span>
                        {{ Term.placeHolder.layoutUpdate }}
                      </span>
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                    margin-left: 8px;
                                  "
                        :name="`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowRight ?? 'icon-t-arrow-right'}`"
                        size="14"></t-icon>

                      <q-menu anchor="top right" v-if="operateTopPopover" self="top left" v-model="layoutMenuVisible"
                        transition-show="flip-right" transition-hide="flip-left">
                        <div class="tr-filter-menu row no-wrap q-pa-sm" ref="layoutMenuRef">
                          <div class="m-list" style="min-width: 100px">
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(12)"
                              @click="layoutUpdate(12)">
                              {{ this.Term.placeHolder.layout2 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(8)"
                              @click="layoutUpdate(8)">
                              {{ this.Term.placeHolder.layout3 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(6)"
                              @click="layoutUpdate(6)">
                              {{ this.Term.placeHolder.layout4 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(4)"
                              @click="layoutUpdate(4)">
                              {{ this.Term.placeHolder.layout6 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(3)"
                              @click="layoutUpdate(3)">
                              {{ this.Term.placeHolder.layout8 }}
                            </div>
                          </div>
                        </div>
                      </q-menu>
                    </div>
                  </div>
                </div>
              </div>
              <template #reference>
                <t-button ref="more" style="   width: 32px;height: 32px;min-width: 0;" icon="more_horiz"
                  :tabIndex="tabIndex" class="tr-button-default"
                  @click.stop="operateTopPopover = !operateTopPopover; FilterMenuIsShow = false"></t-button> </template>
            </el-popover>
            <!-- 20241209 改版隐藏清空按钮 刁春辉 -->
            <span class="filter-values-item-clear" v-if="isShowCollapse=='1'" @click="shiftFiltersFlod" @keyup.enter="shiftFiltersFlod"
              :tabIndex="tabIndex" :title="this.FiltersIsShow
                ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
                : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
                ">
              {{
                this.FiltersIsShow
                  ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
                  : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
              }}
              <i style="font-size:10px !important" :class="`q-icon fas dx-icon icon-t-arrow-${!FiltersIsShow?'down':'up'} t-icon`"></i>
            </span>
          </div>
        </div>

        <!-- 当前无条件文本提示框 -->
        <span class="filter-group-empty" v-if="this.Groups.length == 0 && !this.FilterIsClassic" style="float: left"
          v-show="false">
          {{ Term.placeHolder.noCondition }}
        </span>
        <div  :style="`display: flex;justify-content: space-between; align-items: start;${enableQuickFilter==='1'&&FilterIsClassic?'margin:16px 0;':'width:0;height:0;overflow:hidden'}`">
          <t-quick-filter style='opacity:100%' class='fasr_quick_filter for-saas' ref="fasr_quick_filter"
            :instanceCode='"fasr_quick_filter" + window?.Funcs.Guid()' :filterFields="conputedFilterFieldsQuickFilter"
            :tabIndex='1' :optColumns="computedFilterFields" @filterChanged='fasr_quick_filter_OnFilterChanged'
            :pageID='PageID' :pageCode='PageCode' :quickItems='fasr_filter_QuickItems'
            :quickItemSummary='fasr_filter_QuickItemSummary' @init='fasr_quick_filter_Init'
            @querySummary='fasr_quick_filter_QuerySummary'
     
            :selectHelperSearchConfig="selectHelperSearchConfig">
            <template #before>
              <el-popover v-if="showShortcutCondition == 1&&isShowTopContent!=='1'" placement="bottom" trigger="click" :visible="FilterMenuIsShow"
              ref={menuContent} fit width='auto' popper-style="padding:0;z-index:1000">
              <div @click="stopPropagationByFilter" @mouseenter="stopclosePanel" class='tr-filter-menu-classic tr-filter'
                :class="{ 'tr-filter-menu-classic-show': true }" v-if="FilterMenuIsShow" >
                <span :class="[
                  'filter-groups-panel',
                  !!FilterIsClassic ? 'block-panel' : '',
                ]">
                  <draggable :modelValue="computedGroups" @update:modelValue="v => $emit('update:Groups', v)"
                    @change="v => console.log('change', v)" @start="FilterDragging = true" @end="FilterDragging = false"
                    item-key="ID" :filter="isMobile ? '.filter-item-drag-handle' : ''" :move="onMove"
                    style="display: inline" :style="{ width: computedPanelWidth }">
                    <template #item="{ element, index }">
                      <FilterGroup :key="element.ID" :Group="element" @focusFilterDivDelayed="focusFilterDivDelayed"
                        @update:GroupChild="({ GroupIndex, index, value }) =>
                          $emit('update:GroupChild', { GroupIndex, index, value })
                          " @update:Group="value => $emit('update:Group', { index, value })" :Groups="Groups"
                        @update:Groups="value => $emit('update:Groups', value)" :GroupIndex="index" :Fields="Fields"
                        :Mappings="Mappings" :Conditions="Conditions" :FilterIsEasy="FilterIsEasy"
                        :FilterIsClassic="FilterIsClassic" :IsOuter="true" :InitValueScript="InitValueScript"
                        :tabIndex="tabIndex" :class="[
                          index == 0 ? 'filter-group-first' : '',
                          !!FilterIsClassic
                            ? 'el-col-' +
                            (isMobile ? 24 : element.ColNum || 6) +
                            ' filter-group-classic'
                            : 'filter-groups-item-panel',
                        ]"
                         :enableHelpTip="element.enableHelpTip"
                        :helpTipPlacement="element.helpTipPlacement"
                        :helpTipContext ="element.helpTipContext"
                        >
                      </FilterGroup>
                    </template>
                  </draggable>


                  <!-- 经典模式操作按钮组 -->
                  <!-- icon="search" -->
                  <span class="filter-opers-panel" style="padding: 24px 0 16px 0" v-if="!!this.FilterIsClassic">
                    <!-- 经典模式查询按钮 -->
                    <t-button ref="query" class="tr-button-primary"  :tabIndex="tabIndex" :show-hint="true"
                      :title="Term.placeHolder.query" :label="Term.placeHolder.query"
                      @click="FilterMenuIsShow = false; filterQuery()">
                    </t-button>

                    <!-- 经典模式清空按钮 icon="clear"-->
                    <t-button ref="clear" style="margin-left: 12px"  :label="Term.placeHolder.clear"
                      class="tr-button-default" :tabIndex="tabIndex" :show-hint="true" :title="Term.title.clearAll"
                      @click="clearQuery" />
                    <t-button ref="clear" style="margin-left: 12px" icon="grid_view" :label="Term.placeHolder.filterSet"
                      class="tr-button-default" :tabIndex="tabIndex" :show-hint="true"
                      :title="Term.placeHolder.filterSet" @click=" ConfigGroups = GetConfigGroups();
                      FilterDrawer = true;
                      operateTopPopover = false;" />

                  </span>
                </span>
              </div>
              <template #reference>
               
                <i class='fas dx-icon icon-t-filter  '
                :class="showFasrFilterMark?'fasr_filter_mark':''"
                  :style="(FiltersIsShow||isShowCollapse!=='1' ) ? 'color:rgba(0,0,0,.32);cursor:not-allowed;margin-right:10px' : 'margin-right:10px'"
                  style="position:relative;cursor: pointer;  height: 32px;width: 20px;line-height: 32px;text-align: center;" @click="openPanel" @mouseenter="onlyOpenPanel"  @mouseleave="onlyClosePanel" />
              </template>
            </el-popover>
          </template>
          </t-quick-filter>
          <div class="filter-values-panel" v-if="isShowTopContent==='0'&&operatePosition==='0'" style="    flex: none;" >
            <!-- 经典模式查询按钮 -->
            <t-button ref="query" class="tr-button-primary" :tabIndex="tabIndex" :show-hint="true"
              :title="Term.placeHolder.query" :label="Term.placeHolder.query"
              @click="FilterMenuIsShow = false; filterQuery()">
            </t-button>
            <!-- 经典模式清空按钮 -->
            <t-button ref="clear" :label="Term.placeHolder.clear" class="tr-button-default" :tabIndex="tabIndex"
              :show-hint="true" :title="Term.title.clearAll" @click="clearQuery" />
            <el-popover
              v-if="(isShowOperateCellButton==1&&(FiltersIsShow || (!FiltersIsShow && (!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1))))"
              placement="bottom" trigger="click" :visible="operateTopPopover" fit width='auto' popper-style="padding:0">
              <div class="tr-filter-menu row no-wrap q-pa-md" @click="stopPropagationByFilter">
                <div class="column" style="width: max-content;">
                  <div class="operateMore">
                    <div
                      v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                      class="title z-readonly" style="margin-top: 0px" @mouseenter="hideLayoutMenu"
                      :data-mode="FilterModel">
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                  " name="grid_view" size="14px"></t-icon>{{ this.Term.moreOperate.modeSelect }}
                    </div>

                    <div class="m-list" style="padding: 4px 8px" @mouseenter="hideLayoutMenu"
                      v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)">
                      <div class="item" v-if="getStatus('Easy').show"
                        :style="getStatus('Easy').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                        <t-radio :disable="getStatus('Easy').readonly" class="tr-radio-group-small"
                          v-model="FilterModel_Data" :tabIndex="tabIndex" val="Easy" size="xs" />
                        <span :disable="getStatus('Easy').readonly" style="margin-left: 8px"
                          @click="FilterModel_Data = 'Easy'">{{
                            Term.field.simpleMode
                          }}</span>
                      </div>
                      <div class="item" v-if="getStatus('Comp').show"
                        :style="getStatus('Comp').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                        <t-radio :disable="getStatus('Comp').readonly" class="tr-radio-group-small" :tabIndex="tabIndex"
                          v-model="FilterModel_Data" val="Comp" size="xs" />
                        <span :disable="getStatus('Comp').readonly" style="margin-left: 8px"
                          @click="FilterModel_Data = 'Comp'">{{
                            Term.field.complexMode
                          }}</span>
                      </div>
                      <div class="item" v-if="getStatus('Classic').show"
                        :style="getStatus('Classic').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                        <t-radio :disable="getStatus('Classic').readonly" class="tr-radio-group-small"
                          :tabIndex="tabIndex" v-model="FilterModel_Data" val="Classic" size="xs" />
                        <span :disable="getStatus('Classic').readonly" style="margin-left: 8px"
                          @click="FilterModel_Data = 'Classic'">{{
                            Term.field.classicModel
                          }}</span>
                      </div>
                    </div>

                    <t-separator
                      v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                      v-show="FiltersIsShow || !FilterIsClassic" style="margin: 4px 0 8px 0"
                      @mouseenter="hideLayoutMenu"></t-separator>

                    <div v-show="FiltersIsShow || !FilterIsClassic" class="title" :tabIndex="tabIndex" @keyup.enter="
                      ConfigGroups = GetConfigGroups();
                    FilterDrawer = true;
                    operateTopPopover = false;
                    " @click="
                      ConfigGroups = GetConfigGroups();
                    FilterDrawer = true;
                    operateTopPopover = false;
                    " style="cursor: pointer">
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                  " name="grid_view" size="14px"></t-icon>{{ Term.placeHolder.filterSet }}
                    </div>

                    <div v-show="FiltersIsShow || !FilterIsClassic" class="title" :tabIndex="tabIndex"
                      style="margin-bottom: 0; cursor: pointer" v-if="!isMobile">
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                  " name="settings" size="14px"></t-icon><span>
                        {{ Term.placeHolder.layoutUpdate }}
                      </span>
                      <t-icon style="
                                    color: var(--color-text-alpha-3);
                                    vertical-align: sub;
                                    margin-left: 8px;
                                  "
                        :name="`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowRight ?? 'icon-t-arrow-right'}`"
                        size="14"></t-icon>

                      <q-menu anchor="top right" v-if="operateTopPopover" self="top left" v-model="layoutMenuVisible"
                        transition-show="flip-right" transition-hide="flip-left">
                        <div class="tr-filter-menu row no-wrap q-pa-sm" ref="layoutMenuRef">
                          <div class="m-list" style="min-width: 100px">
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(12)"
                              @click="layoutUpdate(12)">
                              {{ this.Term.placeHolder.layout2 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(8)"
                              @click="layoutUpdate(8)">
                              {{ this.Term.placeHolder.layout3 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(6)"
                              @click="layoutUpdate(6)">
                              {{ this.Term.placeHolder.layout4 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(4)"
                              @click="layoutUpdate(4)">
                              {{ this.Term.placeHolder.layout6 }}
                            </div>
                            <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(3)"
                              @click="layoutUpdate(3)">
                              {{ this.Term.placeHolder.layout8 }}
                            </div>
                          </div>
                        </div>
                      </q-menu>
                    </div>
                  </div>
                </div>
              </div>
              <template #reference>
                <t-button ref="more" style="   width: 32px;height: 32px;min-width: 0;" icon="more_horiz"
                  :tabIndex="tabIndex" class="tr-button-default"
                  @click.stop="operateTopPopover = !operateTopPopover; FilterMenuIsShow = false"></t-button> </template>
            </el-popover>
            <span class="filter-values-item-clear" v-if="isShowCollapse=='1'" @click="shiftFiltersFlod" @keyup.enter="shiftFiltersFlod"
              :tabIndex="tabIndex" :title="this.FiltersIsShow
                ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
                : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
                ">
              {{
                this.FiltersIsShow
                  ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
                  : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
              }}
              <i style="font-size:10px !important" :class="`q-icon fas dx-icon icon-t-arrow-${!FiltersIsShow?'down':'up'} t-icon`"></i>
            </span>
          </div>
          <div class="filter-values-panel" v-if="isShowTopContent==='0'&&operatePosition==='1'&&isShowCollapse=='1'" style="    flex: none;" >
            <span class="filter-values-item-clear" style="height: 32px;line-height: 32px;" @click="shiftFiltersFlod" @keyup.enter="shiftFiltersFlod"
              :tabIndex="tabIndex" :title="this.FiltersIsShow
                ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
                : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
                ">
              {{
                this.FiltersIsShow
                  ? `${this.Term.placeHolder.hideFilters}${$q.lang.label.t_filter}`
                  : `${this.Term.placeHolder.showFilters}${$q.lang.label.t_filter}`
              }}
              <i style="font-size:10px !important" :class="`q-icon fas dx-icon icon-t-arrow-${!FiltersIsShow?'down':'up'} t-icon`"></i>
            </span>
          </div>
        </div>

        <!-- 筛选条件项内容展示操作区域 -->
        <span v-if="(FiltersIsShow||isShowCollapse!=='1' )&& IniLoadedFiltersIsShow || !FilterIsClassic" :class="[
          'filter-groups-panel',
          !!FilterIsClassic ? 'block-panel' : '',
        ]"
        :style="enableQuickFilter==='1'?'':'margin-top:16px'"
        >

          <draggable :modelValue="computedGroups" @update:modelValue="v => $emit('update:Groups', v)"
            @change="v => console.log('change', v)" @start="FilterDragging = true" @end="FilterDragging = false"
            item-key="ID" :filter="isMobile ? '.filter-item-drag-handle' : ''" :move="onMove" style="display: inline">
            <template #item="{ element, index }">
              <FilterGroup :key="element.ID" :Group="element" @focusFilterDivDelayed="focusFilterDivDelayed"
                @update:GroupChild="({ GroupIndex, index, value }) =>
                  $emit('update:GroupChild', { GroupIndex, index, value })
                  " @update:Group="value => $emit('update:Group', { index, value })" :Groups="Groups"
                @update:Groups="value => $emit('update:Groups', value)" :GroupIndex="index" :Fields="Fields"
                :Mappings="Mappings" :Conditions="Conditions" :FilterIsEasy="FilterIsEasy"
                :FilterIsClassic="FilterIsClassic" :IsOuter="true" :InitValueScript="InitValueScript"
                :tabIndex="tabIndex" :class="[
                  index == 0 ? 'filter-group-first' : '',
                  !!FilterIsClassic
                    ? 'el-col-' +
                    (isMobile ? 24 : element.ColNum || 6) +
                    ' filter-group-classic'
                    : 'filter-groups-item-panel',
                ]"
                 :enableHelpTip="element.enableHelpTip"
                :helpTipPlacement="element.helpTipPlacement"
                :helpTipContext ="element.helpTipContext"
                >
              </FilterGroup>
            </template>
          </draggable>

          <!-- 简单、复杂模式操作按钮组 -->
          <span class="filter-opers-panel" style="padding: 1px 0 0;margin-bottom:16px" v-if="!this.FilterIsClassic">
            <!-- 简单模式添加条件按钮 -->
            <t-button v-if="!!this.FilterIsEasy" padding="6px" style="margin-left: 12px; padding: 6px"
              class="tr-button-default" @click="addFilterClick" :show-hint="false"
              :title="Term.placeHolder.clickAddItem" :tabIndex="tabIndex">
              <svg class="svg-icon" viewBox="-2 -2 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M29.64,19.85h-8a.85.85,0,0,0-.65.28l-.08.1A1,1,0,0,0,21,21.46l3.3,3.27V32L27,29.9V24.75l3.3-3.27a.94.94,0,0,0,.28-.7A.91.91,0,0,0,29.64,19.85ZM23.92,9.65H14.69V0H10.08V9.65H.83v4.82h9.25v9.65h4.61V14.47h9.23Z">
                </path>
              </svg>
            </t-button>

            <!-- 复杂模式添加条件项按钮 -->
            <t-button v-if="!this.FilterIsEasy" padding="6px" style="margin-left: 12px; padding: 6px"
              class="tr-button-default" @click="addFilterClick" :show-hint="false"
              :title="Term.placeHolder.clickAddItem" :tabIndex="tabIndex">
              <svg class="svg-icon" viewBox="-2 -2 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M29.64,19.85h-8a.85.85,0,0,0-.65.28l-.08.1A1,1,0,0,0,21,21.46l3.3,3.27V32L27,29.9V24.75l3.3-3.27a.94.94,0,0,0,.28-.7A.91.91,0,0,0,29.64,19.85ZM23.92,9.65H14.69V0H10.08V9.65H.83v4.82h9.25v9.65h4.61V14.47h9.23Z">
                </path>
              </svg>

              <q-menu transition-show="jump-down" transition-hide="jump-up" v-model="visibleAddFilterMenu">
                <div class="tr-filter-menu row no-wrap q-pa-md">
                  <div class="m-list" style="">
                    <div class="item" :title="Term.placeHolder.addItem" :tabIndex="tabIndex" @keyup.enter="
                      visibleAddFilterMenu = false;
                    addFilterCommand('item');
                    " @click="
                      visibleAddFilterMenu = false;
                    addFilterCommand('item');
                    " style="cursor: pointer">
                      <svg data-v-b93e0080="" viewBox="0 -6 40 26" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        class="svg-icon">
                        <path data-v-b93e0080=""
                          d="M5.25,9.44,0,22.56H2.57L4,19H8.88l1.44,3.58H12.9L7.64,9.44ZM5,16.59l1.48-3.71,1.5,3.71Zm27-2.83a3.55,3.55,0,0,0-3.56-3.55H21.32V22.07h7.11a3.56,3.56,0,0,0,2.66-5.94A3.47,3.47,0,0,0,32,13.76Zm-3.56,5.93H23.68V17.32h4.75a1.19,1.19,0,1,1,0,2.37Zm0-4.75H23.68V12.57h4.75a1.19,1.19,0,1,1,0,2.37Zm-14.6.47h5.5v-2.2h-5.5Zm0,4.11h5.5v-2.2h-5.5Z"
                          transform="translate(0 -9.44)"></path>
                      </svg>
                      <span style="padding-left: 8px">{{
                        Term.field.add
                      }}</span>
                    </div>

                    <div class="item" style="margin-bottom: 0; cursor: pointer" :title="Term.placeHolder.addGroup"
                      :tabIndex="tabIndex" @keyup.enter="
                        visibleAddFilterMenu = false;
                      addFilterCommand('group');
                      " @click="
                        visibleAddFilterMenu = false;
                      addFilterCommand('group');
                      ">
                      <svg data-v-78fef8c0="" viewBox="0 -4 40 22" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        class="svg-icon">
                        <path data-v-78fef8c0=""
                          d="M9,2,5.45,14.36H7.18l1-3.37h3.28l1,3.37h1.7L10.58,2Zm-.2,6.75L9.84,5.25l1,3.49Zm5.94,2.76h3.7V9.43H14.75Zm0-3.87h3.7V5.56H14.75Zm11.58.68a4.14,4.14,0,0,0,.62-2.24c0-1.84-1.06-3.34-2.39-3.34H19.77V13.9h4.78c1.32,0,2.39-1.49,2.4-3.34a4.17,4.17,0,0,0-.62-2.25Zm-1.62,3.35H21.36V9.43h3.18c.44-.06.83.39.87,1S25.13,11.6,24.68,11.66Zm0-4.47H21.36V5h3.18c.44,0,.83.4.87,1A1.06,1.06,0,0,1,24.68,7.19ZM1.92,1.37A14.24,14.24,0,0,0,0,8.55a12,12,0,0,0,1.92,7.13H3.18A15.13,15.13,0,0,1,1.39,8.55,15.76,15.76,0,0,1,3.18,1.37Zm28.16,0H28.82a15.76,15.76,0,0,1,1.79,7.18,15.13,15.13,0,0,1-1.79,7.13h1.26A12,12,0,0,0,32,8.55,14.24,14.24,0,0,0,30.08,1.37Z"
                          transform="translate(0 -1.37)"></path>
                      </svg>
                      <span style="padding-left: 4px">{{
                        Term.field.addGroup
                      }}</span>
                    </div>
                  </div>
                </div>
              </q-menu>
            </t-button>

            <!-- 更多 -->
            <t-button v-show="isShowOperateCellButton==1&&(FiltersIsShow || !this.FilterIsClassic)" padding="6px" style="margin-left: 12px"
              icon="more_horiz" :tabIndex="tabIndex" class="tr-button-default">
              <q-menu transition-show="jump-down" transition-hide="jump-up" v-model="operatePopover">
                <div class="tr-filter-menu row no-wrap q-pa-md">
                  <div class="column">
                    <div class="operateMore">
                      <div
                        v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                        class="title z-readonly" style="margin-top: 0px" @mouseenter="hideLayoutMenu"
                        :data-mode="FilterModel">
                        <t-icon style="
                            color: var(--color-text-alpha-3);
                            vertical-align: sub;
                          " name="grid_view" size="14px"></t-icon>{{ this.Term.moreOperate.modeSelect }}
                      </div>

                      <div
                        v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                        class="m-list" style="padding: 4px 8px" @mouseenter="hideLayoutMenu">
                        <div class="item" v-if="getStatus('Easy').show"
                          :style="getStatus('Easy').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                          <t-radio :disable="getStatus('Easy').readonly" class="tr-radio-group-small"
                            :tabIndex="tabIndex" v-model="FilterModel_Data" val="Easy" size="xs" />
                          <span :disable="getStatus('Easy').readonly" style="margin-left: 8px"
                            @click="FilterModel_Data = 'Easy'">{{ Term.field.simpleMode
                            }}</span>
                        </div>
                        <div class="item" v-if="getStatus('Comp').show"
                          :style="getStatus('Comp').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                          <t-radio :disable="getStatus('Comp').readonly" class="tr-radio-group-small"
                            :tabIndex="tabIndex" v-model="FilterModel_Data" val="Comp" size="xs" />
                          <span :disable="getStatus('Comp').readonly" style="margin-left: 8px"
                            @click="FilterModel_Data = 'Comp'">{{ Term.field.complexMode
                            }}</span>
                        </div>
                        <div class="item" v-if="getStatus('Classic').show"
                          :style="getStatus('Classic').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                          <t-radio :disable="getStatus('Classic').readonly" class="tr-radio-group-small"
                            v-model="FilterModel_Data" :tabIndex="tabIndex" val="Classic" size="xs" />
                          <span :disable="getStatus('Classic').readonly" style="margin-left: 8px"
                            @click="FilterModel_Data = 'Classic'">{{
                              Term.field.classicModel
                            }}</span>
                        </div>
                      </div>

                      <t-separator
                        v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                        style="margin: 4px 0 8px 0" @mouseenter="hideLayoutMenu"></t-separator>

                      <div class="title z-readonly">
                        <i></i>
                        {{ this.Term.moreOperate.allCondition }}
                      </div>

                      <div class="m-list" style="padding: 4px 8px">
                        <div class="item" :tabIndex="tabIndex" @keyup.enter="moreOperCommand('open')"
                          @click="moreOperCommand('open')">{{ Term.moreOperate.enableAllCondition }}</div>
                        <div class="item" :tabIndex="tabIndex" @keyup.enter="moreOperCommand('close')"
                          @click="moreOperCommand('close')">{{ Term.moreOperate.disableAllCondition }}</div>
                        <div class="item" :tabIndex="tabIndex" @keyup.enter="moreOperCommand('delete')"
                          @click="moreOperCommand('delete')">{{ Term.moreOperate.deleteAllCondition }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </q-menu>
            </t-button>

            <!-- 简单、复杂经典模式查询按钮 -->
            <t-button v-show="FilterIsChange" padding="6px" style="margin-left: 12px" icon="search"
              class="tr-button-default" :show-hint="true" :tabIndex="tabIndex" :title="Term.placeHolder.query"
              @click="changeApply"></t-button>
          </span>

          <!-- 经典模式操作按钮组 padding: 4px 0 0 icon="search"-->
          <span class="filter-opers-panel" style="padding: 0;margin-bottom:16px" v-if="!!this.FilterIsClassic&&(isShowTopContent==='0'||(operatePosition==='1'&&isShowTopContent==='1'))&&(enableQuickFilter==='0'||(operatePosition==='1'&&enableQuickFilter==='1'))">
            <!-- 经典模式查询按钮 -->
            <t-button ref="query" class="tr-button-primary"  :tabIndex="tabIndex" :show-hint="true"
              :title="Term.placeHolder.query" :label="Term.placeHolder.query" @click="filterQuery">
            </t-button>

            <!-- 经典模式清空按钮 icon="clear" -->
            <t-button ref="clear" style="margin-left: 12px" :label="Term.placeHolder.clear"
              class="tr-button-default" :tabIndex="tabIndex" :show-hint="true" :title="Term.title.clearAll"
              @click="clearQuery" />

            <!-- 更多 -->
            <t-button v-if="isShowOperateCellButton==1" ref="more" padding="8px" style="margin-left: 12px" icon="more_horiz" :tabIndex="tabIndex"
              class="tr-button-default">
              <q-menu transition-show="jump-down" transition-hide="jump-up" v-model="operatePopover">
                <div class="tr-filter-menu row no-wrap q-pa-md">
                  <div class="column">
                    <div class="operateMore">
                      <div
                        v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                        class="title z-readonly" style="margin-top: 0px" @mouseenter="hideLayoutMenu"
                        :data-mode="FilterModel">
                        <t-icon style="
                            color: var(--color-text-alpha-3);
                            vertical-align: sub;
                          " name="grid_view" size="14px"></t-icon>{{ this.Term.moreOperate.modeSelect }}
                      </div>

                      <div
                        v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                        class="m-list" style="padding: 4px 8px" @mouseenter="hideLayoutMenu">
                        <div class="item" v-if="getStatus('Easy').show"
                          :style="getStatus('Easy').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                          <t-radio class="tr-radio-group-small" :disable="getStatus('Easy').readonly"
                            v-model="FilterModel_Data" :tabIndex="tabIndex" val="Easy" size="xs" />
                          <span style="margin-left: 8px" :disable="getStatus('Easy').readonly"
                            @click="FilterModel_Data = 'Easy'">{{
                              Term.field.simpleMode
                            }}</span>
                        </div>
                        <div class="item" v-if="getStatus('Comp').show"
                          :style="getStatus('Comp').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                          <t-radio :disable="getStatus('Comp').readonly" class="tr-radio-group-small"
                            :tabIndex="tabIndex" v-model="FilterModel_Data" val="Comp" size="xs" />
                          <span :disable="getStatus('Comp').readonly" style="margin-left: 8px"
                            @click="FilterModel_Data = 'Comp'">{{
                              Term.field.complexMode
                            }}</span>
                        </div>
                        <div class="item" v-if="getStatus('Classic').show"
                          :style="getStatus('Classic').readonly ? `opacity: .7;cursor: not-allowed;` : ''">
                          <t-radio :disable="getStatus('Classic').readonly" class="tr-radio-group-small"
                            :tabIndex="tabIndex" v-model="FilterModel_Data" val="Classic" size="xs" />
                          <span :disable="getStatus('Classic').readonly" style="margin-left: 8px"
                            @click="FilterModel_Data = 'Classic'">{{
                              Term.field.classicModel
                            }}</span>
                        </div>
                      </div>

                      <t-separator
                        v-if="(!staticItems || staticItems.filter(item => item.isEnable || item.ID == FilterModel).length > 1)"
                        style="margin: 4px 0 8px 0" @mouseenter="hideLayoutMenu"></t-separator>

                      <div class="title" :tabIndex="tabIndex" @keyup.enter="
                        ConfigGroups = GetConfigGroups();
                      FilterDrawer = true;
                      operatePopover = false;
                      " @click="
                        ConfigGroups = GetConfigGroups();
                      FilterDrawer = true;
                      operatePopover = false;
                      " style="cursor: pointer">
                        <t-icon style="
                            color: var(--color-text-alpha-3);
                            vertical-align: sub;
                          " name="grid_view" size="14px"></t-icon>{{ Term.placeHolder.filterSet }}
                      </div>

                      <div class="title" :tabIndex="tabIndex" style="margin-bottom: 0; cursor: pointer"
                        v-if="!isMobile">
                        <t-icon style="
                            color: var(--color-text-alpha-3);
                            vertical-align: sub;
                          " name="settings" size="14px"></t-icon><span>
                          {{ Term.placeHolder.layoutUpdate }}
                        </span>
                        <t-icon style="
                            color: var(--color-text-alpha-3);
                            margin-left: 8px;
                          "
                          :name="`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowRight ?? 'icon-t-arrow-right'}`"
                          size="14px"></t-icon>

                        <q-menu anchor="top right" self="top left" v-model="layoutMenuVisible"
                          transition-show="flip-right" transition-hide="flip-left">
                          <div class="tr-filter-menu row no-wrap q-pa-sm" ref="layoutMenuRef">
                            <div class="m-list" style="min-width: 100px">
                              <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(12)"
                                @click="layoutUpdate(12)">
                                {{ this.Term.placeHolder.layout2 }}
                              </div>
                              <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(8)"
                                @click="layoutUpdate(8)">
                                {{ this.Term.placeHolder.layout3 }}
                              </div>
                              <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(6)"
                                @click="layoutUpdate(6)">
                                {{ this.Term.placeHolder.layout4 }}
                              </div>
                              <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(4)"
                                @click="layoutUpdate(4)">
                                {{ this.Term.placeHolder.layout6 }}
                              </div>
                              <div class="item" :tabIndex="tabIndex" @keyup.enter="layoutUpdate(3)"
                                @click="layoutUpdate(3)">
                                {{ this.Term.placeHolder.layout8 }}
                              </div>
                            </div>
                          </div>
                        </q-menu>
                      </div>
                    </div>
                  </div>
                </div>
              </q-menu>
            </t-button>
          </span>
        </span>
      </div>
    </div>


    <q-dialog v-if="!!this.FilterIsClassic" v-model="FilterDrawer" class="tr-filter-dialog">
      <t-card style="width: 450px; max-width: 90%">
        <t-card-section style="padding: 16px 24px">
          <div class="row">
            <div style="width: 355px; max-width: 95%">
              <div style="color: var(--color-text-alpha-2); font-size: 16px">{{
                this.Term.placeHolder.filterSet
              }}</div>
            </div>
            <div style="text-align: center; cursor: move; margin-left: 10px">
              <q-checkbox ref="FilterDrawerAllSelect" @update:model-value="v => {
                isCheckAll = v;
                checkAll();
              }
                " size="xs" :modelValue="isCheckAll" />
            </div>
          </div>
        </t-card-section>

        <t-separator color="#F0F2F5" />

        <t-card-section style="max-height: 70vh; padding: 16px 24px" class="scroll">
          <draggable v-model="ConfigGroups" ghost-class="ghost" @start="FieldDragging = true"
            @end="FieldDragging = false" item-key="ID">
            <template #item="{ element, index }">
              <div :key="element.ID" class="row filter-field-config-item" style="width: 100%">
                <div style="
                    display: flex;
                    align-items: center;
                    cursor: move;
                    width: 355px;
                    max-width: 95%;
                  ">
                  <t-icon name="toc" style="margin-right: 8px" />

                  <span :title="element.Name" style="
                      overflow: hidden;
                      display: -webkit-box;
                      word-break: keep-all;
                      text-overflow: ellipsis;
                      -webkit-line-clamp: 1;
                      -webkit-box-orient: vertical;
                    ">{{ element.Name }}</span>
                </div>
                <div style="text-align: center; cursor: move; margin-left: 10px">
                  <q-checkbox v-model="element.IsShow" size="xs" :disable="element.filter_isMust"/>
                </div>
              </div>
            </template>
          </draggable>
        </t-card-section>

        <t-separator color="#F0F2F5" />

        <t-card-actions align="right" style="padding: 16px 24px">
          <t-button ref="clear" style="padding: 8px 11px; min-width: 74px" :label="Term.placeHolder.cancel"
            class="tr-button-default" @click="closeFieldDrawer" />

          <t-button ref="query" style="margin-left: 12px; padding: 8px 11px; min-width: 74px" class="tr-button-primary"
            :label="Term.placeHolder.sure" @click="sureFieldDrawer"
            @keydown.tab.stop.prevent="$refs.FilterDrawerAllSelect.$el.focus()">
          </t-button>
        </t-card-actions>
      </t-card>
    </q-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import draggable from 't/third-party/vuedraggable';
import useMappingProps from 't/common/hooks/useMappingProps';
import { useQuasar } from '@teld/q-components';

import { Terms } from './config/resouce';
import { MixinsStateFocusedAutoOpen } from './mixins/mixinsStateFocusedAutoOpen';
import { ElPopover, ClickOutside as vClickOutside } from 'element-plus';
import QScrollArea from '@teld/q-components/ScrollArea';
import QDialog from '@teld/q-components/Dialog';
import QMenu from '@teld/q-components/Menu';
import QCheckbox from '@teld/q-components/Checkbox';

import TIcon from 't/basic/icon/Component';
import TRadio from 't/basic/radio/Component';
import TButton from 't/basic/button/Component';
import TSeparator from 't/basic/separator/Component';
import TDialog from 't/basic/dialog';
import TList from 't/basic/list';
import TItem from 't/basic/item';
import TItemSection from 't/basic/item-section';
import TCard from 't/basic/card';
import TCardSection from 't/basic/card/CardSection';
import TCardActions from 't/basic/card/CardActions';
import TPopover from '../query-plan/p/popover';
import FilterGroup from './FilterGroup';
import TQuickFilter from 't/bussiness/quick-filter';
const readCookie = window.readCookie || undefined;
/**
 * 格式化时间
 *
 * 示例：
 * new Date(2012,1,1,10,9).format('yyyy-MM-dd hh:mm:ss)
 * out: 2012-01-01 10:09:00
 */
const dateFormat = function (dateObj, yyyyMMdd) {
  var month = dateObj.getMonth() + 1,
    date = dateObj.getDate(),
    hours = dateObj.getHours(),
    min = dateObj.getMinutes(),
    sec = dateObj.getSeconds();
  return yyyyMMdd
    .replace(/yyyy/g, dateObj.getFullYear())
    .replace(/yy/g, String(dateObj.getFullYear()).substr(2, 2))
    .replace(/MM/g, month >= 10 ? month : '0' + month)
    .replace(/M\*/g, month)
    .replace(/dd/g, date >= 10 ? date : '0' + date)
    .replace(/d\*/g, date)
    .replace(/hh/g, hours >= 10 ? hours : '0' + hours)
    .replace(/h\*/g, hours)
    .replace(/m\*/g, min)
    .replace(/mm/g, min >= 10 ? min : '0' + min)
    .replace(/ss/g, sec >= 10 ? sec : '0' + sec)
    .replace(/s\*/g, sec);
};

const Funcs = {
  Notify: () => { },
  Confirm: () => { },
  GetTerms: () => { },
  AtVarTransform: () => { },
  FasRequestTagAdd: () => { },
  DateTimeToString: () => { },
  DateToString: () => { },
  ...(window.Funcs || {}),
};

let DateTimeFormat_Date_Time = {
  format: v => {
    return dateFormat(new Date(v), 'yyyy/MM/dd hh:mm:ss');
  },
};
let DateTimeFormat_Date = {
  format: v => {
    return dateFormat(new Date(v), 'yyyy/MM/dd');
  },
};

if (window.readCookie && readCookie?.('teld_locale')) {
  DateTimeFormat_Date_Time.format = Funcs.DateTimeToString;
  DateTimeFormat_Date.format = Funcs.DateToString;
}
let _GroupsProxy = null
export default {
  name: 'FilterPanel',
  mixins: [MixinsStateFocusedAutoOpen],
  components: {
    TPopover,
    FilterGroup,
    draggable,

    QScrollArea,
    QDialog,
    QMenu,
    QCheckbox,

    TIcon,
    TRadio,
    TButton,
    TSeparator,
    TList,
    TItemSection,
    TItem,
    TDialog,
    TCard,
    TCardSection,
    TCardActions,
    ElPopover,
    TQuickFilter
  },
  props: [
    'Groups',
    'FilterIsChange',
    'Fields',
    'IsAuto',
    'FilterIsEasy',
    'Mappings',
    'Conditions',
    'FilterIsClassic',
    'FiltersIsShow',
    'ValuesGroups',
    'InitValueScript',
    'tabIndex',
    'showShortcutCondition',
    "IniLoadedFiltersIsShow",
    "staticItems",
    "filterFields",
    "filterFields_QuickFilter",
    "PageID",
    "PageCode",
    "enableQuickFilter",
    'quckFilterValue',
    "isShowTopContent",
    "operatePosition",
    "selectHelperSearchConfig",
    "isShowCollapse",
      "fasr_filter_QuickItemSummary" ,
      "fasr_filter_QuickItems",
      "isShowOperateCellButton"
  ],
  data() {
    return {
      isCheckAll: false,
      DateTimeFormat_Date_Time,
      DateTimeFormat_Date,
      FilterModel_Data: '',
      Term: Terms,
      FilterDragging: false,
      FieldDragging: false,
      FilterDrawer: false,
      ConfigGroups: [],
      layoutMenuVisible: false,
      operatePopover: false,
      operateTopPopover: false,
      visibleAddFilterMenu: false,
      menuContent: null,
      FilterMenuIsShow: false,
      LocalVars: {},
      QuickFilterChange:true,
      QuickFilter:[],
      _computedFilterFields_QuickFilter:[],
      key:'',
      mouseEnterTimer:null,
      mouseLeaveTime:null
    };
  },
  watch: {
    operateTopPopover(val){
      if (val) {
        if(!this.key){
          this.key = Math.random().toString(36).slice(-8)
          if(!window.filterPanel){
            window.filterPanel = {}
          }
          window.filterPanel[this.key] = this 
        }

        this.$nextTick(() => {
          for(let i in window.filterPanel){
            if(i!=this.key){
              window.filterPanel[i].operateTopPopover = false
            }
            window.filterPanel[i].FilterMenuIsShow=false
          }
          document.addEventListener('click', this.closeFilterMenu)
        });

      } else {
        document.removeEventListener('click', this.closeFilterMenu)

      }
    },
    FilterMenuIsShow(val) {
      if (val) {
        this.$nextTick(() => {
          document.addEventListener('click', this.closeFilterMenu)
        });
        
        _GroupsProxy = _.cloneDeep(this.Groups)
      } else {
        document.removeEventListener('click', this.closeFilterMenu)
        _GroupsProxy = null
      }
    },
    showMenu(val) {
      if (!this.menuContent) return
      if (val) {
        this.menuContent.show()
      } else {
        this.menuContent.hide()
      }
    },
    FiltersIsShow(val) {
      if (val) {
        this.FilterMenuIsShow = false
      }
    },

    FilterIsClassic(val) {
      if (val) {
        this.$nextTick(() => {
          // this.registerTabEvent(this.$refs.clear);
          // this.registerTabEvent(this.$refs.query);
          // this.registerTabEvent(this.$refs.more);
        });
      }
    },
    FilterModel(val) {
      // console.log(val);
    },
    layoutMenuVisible(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          const elDropdown = document.querySelector('.more-in-dropdown');
          if (!elDropdown || !this.$refs.layoutMenuRef) return;

          // 1层宽度+2层宽度+1层左位置=元素总宽
          // 1层宽度+2层宽度+1层左位置-屏幕总宽=显示不开的宽度
          // 将1层左位置继续减掉显示不开的宽度，保证2层能全显出来

          const { left, width } = elDropdown.getBoundingClientRect();
          const dropdownX = left + width;
          const { width: subMenuX } =
            this.$refs.layoutMenuRef.getBoundingClientRect();

          const overflowWidth =
            dropdownX + subMenuX - document.documentElement.clientWidth;
          this.overflowWidth = overflowWidth;
          if (overflowWidth > 1) {
            // console.log('二级菜单显示不开，需要调外层的绝对定位');
            elDropdown.style.left = `${left - overflowWidth}px`;
          }
        });
      } else {
        if (this.overflowWidth > 1) {
          const elDropdown = document.querySelector('.more-in-dropdown');
          if (!elDropdown) return;
          const { left } = elDropdown.getBoundingClientRect();
          elDropdown.style.left = `${left + this.overflowWidth}px`;
        }
        this.overflowWidth = 0;
      }
    },
    FilterModel_Data(val, old) {
      if (!old || (!this.operatePopover && !this.operateTopPopover) || val == old) return;
      this.operatePopover = false;
      this.operateTopPopover = false;
     
      this.$nextTick(() => {
        if(old){

          this.clearQuckFilterFilters()
          this.$nextTick(()=>{
            this.getQuickFilter()
          })
}   
        if (val == 'Classic') {
          this.shiftClassicMode(old);
        } else if (val == 'Easy') {
          this.shiftEasyMode(old);
        } else {
          this.shiftCompMode(old);
        }

        this.focusFilterDivDelayed();
      });
    },
    ConfigGroups: {
      deep: true,
      immediate: true,
      handler: function (val) {
        // console.log('======ConfigGroups=====', val);
        if (this.ConfigGroups.every(item => item.IsShow)) {
          this.isCheckAll = true;
        } else {
          this.isCheckAll = false;
        }
      },
    },

    FilterDrawer(n, o) {
      if (!n && o) {
        this.focusMoreRef();
      }
    },
    Groups:{
      deep:true,
      immediate:true,
      handler(){
        if (this.enableQuickFilter==='1' && this.FilterIsClassic) {
        let filters = this.$refs?.fasr_quick_filter?.zipFasDynamicFilter({}, this.$parent.getConvertedFilterExpression()) || {}
        let proxy = this.filterFields_QuickFilter.filter(item => !Object.keys(filters)?.includes(item.fieldAlias)).map(ffq=>{
          let target = this.Groups.find(el =>`${ffq.tableAlias}.${ffq.fieldAlias}` == el.Code)||{}
       
          return {
           
            ...ffq,
            enableHelpTip:target.enableHelpTip,
            helpTipPlacement:target.helpTipPlacement,
            helpTipContext: window.Funcs?.GetTerms(target.helpTipContextReferenceExpr,target.helpTipContext)||target.helpTipContext,
            fieldName:target.Name,
          }
        })
        if(JSON.stringify(proxy)!=JSON.stringify(this._computedFilterFields_QuickFilter)){
          this._computedFilterFields_QuickFilter=proxy
        }
      }
      }
     
    }
  },
  setup() {
    const { dialog } = useQuasar();
    const $q = useQuasar();
    return {
      $q,
      notify({ message = '', type = 'info', caption = '' }) {
        Funcs.Notify(caption, message, type);
      },
      dialog,
    };
  },
  mounted() {
    this.LocalVars = window.LocalVars
    this.getQuickFilter()
    //  this.FilterModel_Data = (!!this.FilterIsClassic ? "Classic" : (this.FilterIsEasy ? "Easy" : "Comp"))
    this.ConfigGroups = this.GetConfigGroups();
    // console.log('============== this.ConfigGroups', this.ConfigGroups);
   
  },
  unmounted() {
  
  },
  
  computed: {
    ConfigGroupsByFilter(){
      return this.ConfigGroups.filter(item => !item.filter_isMust)
    },
    //是否展示快速过滤标记
    showFasrFilterMark(){

      return this.ValuesGroups&&Object.keys(this.ValuesGroups).length>0&&!this.FiltersIsShow
    },
    _groupsByComputed(){
      let _groups = []
      this.QuickFilter.forEach(group => {
        if (

          (_.trim(group.Value) != '' &&
            _.trim(group.ValueName) != '' &&
            group.Value != `<${this.Term.field.inputValue}>`) ||
          ['isblank', 'isnotblank'].includes(group.Condition)
        ) {
          _groups.push({
            ...group,
            Value:group.ValueName,
            ValueName:group.Value
          });
        }
      })
      return _groups
    },
    computedValuesGroups() {
      if (!(this.enableQuickFilter==='1' && this.FilterIsClassic)) {
        return this.ValuesGroups
      }
      return [].concat(this._groupsByComputed,this.ValuesGroups)
    },
    computedGroups() {
      if (this.enableQuickFilter==='1' && this.FilterIsClassic) {
        
        return this.Groups.filter(item => !this.conputedFilterFieldsQuickFilter.some(ffq => `${ffq.tableAlias}.${ffq.fieldAlias}` == item.Code))
      } else {
        return this.Groups
      }

    },
    // _computedFilterFields_QuickFilter(){
    //   if (this.enableQuickFilter==='1' && this.FilterIsClassic) {
    //     let filters = this.$refs?.fasr_quick_filter?.zipFasDynamicFilter({}, this.$parent.getConvertedFilterExpression()) || {}
    //     return this.filterFields_QuickFilter.filter(item => !Object.keys(filters)?.includes(item.fieldAlias)).map(ffq=>{
    //       let target = this.Groups.find(el =>`${ffq.tableAlias}.${ffq.fieldAlias}` == el.Code)||{}
    //       return {
    //         ...target,
    //         ...ffq
    //       }
    //     })
    //   } else {
    //     return []
    //   }
    // },
    conputedFilterFieldsQuickFilter() {
      return this._computedFilterFields_QuickFilter

    },
    computedFilterFields() {
      return this.filterFields?.map(item => {
        return {
          "ID": item.ID,
          "tableAlias": item.fieldAlias,
          "tableCode": item.fieldCode,
          "tableName": item.fieldName,
          "fieldCode": item.fieldCode,
          "fieldName":  window?.Funcs.GetTerms( item?.ValueInfo_fieldName?.ReferenceExpr, item.fieldName,) || item.fieldName,
          "fieldAlias": item.fieldAlias,
          "IsFkColumn": item.IsFkColumn,
          "isQuery": item.isQuery,
          "helpPageID": item.helpPageID,
          "helpPageName": item.helpPageName,
          "helpDisplayFiled": item.helpDisplayFiled,
          "helpValueFiled": item.helpValueFiled,
          "DataQuerySourceID": item.DataQuerySourceID,
          "displayFN": item.displayFN,
        };
      }) || []
    },
    computedPanelWidth() {

      if (['xl', 'lg'].includes(this.isResponsiveSize)) {
        return '1118px'
      } else if (this.isResponsiveSize == 'md') {
        return '746px'
      } else if (['sm', 'xs'].includes(this.isResponsiveSize)) {
        return '374px'
      }
      return '100%'
    },
    isResponsiveSize() {
      const $q = useQuasar();
      return $q.screen.name;
    },
    showMenu() {
      return !this.FiltersIsShow && this.FilterMenuIsShow
    },
    FilterModel() {
      this.FilterModel_Data = !!this.FilterIsClassic
        ? 'Classic'
        : this.FilterIsEasy
          ? 'Easy'
          : 'Comp';
      return !!this.FilterIsClassic
        ? 'Classic'
        : this.FilterIsEasy
          ? 'Easy'
          : 'Comp';
    },
    isMobile() {
      return window.TFF?.common?.cts?.isMobile();
    },
    shiftText: function () {
      if (this.FilterIsEasy) {
        return this.Term.placeHolder.shiftCompModel;
      } else {
        return this.Term.placeHolder.shiftEasyModel;
      }
    },
  },
  methods: {
    getQuickFilter(){
      this.QuickFilter= _.cloneDeep(this.$refs?.fasr_quick_filter?.getQuickFilter()?.Filters || []) 
      // this.QuickFilter = this.QuickFilter.slice(0)
    },
    fasr_quick_filter_OnFilterChanged(e) {
      this.filterQuery()
      this.getQuickFilter()
    },
    fasr_quick_filter_Init() {
      this.$emit('fasr_quick_filter_Init')
    },
    fasr_quick_filter_QuerySummary() {
       this.$emit('querySummary')
    },
    getStatus(type) {
      let res = {}
      if (this.FilterModel == type) {
        if (!this.staticItems || this.staticItems.find(item => item.ID == type && item.isEnable)) {
          res = {
            show: true,
            readonly: false
          }
        } else {
          res = {
            show: true,
            readonly: true
          }
        }
      } else if (!this.staticItems || this.staticItems.find(item => item.ID == type && item.isEnable)) {
        res = {
          show: true,
          readonly: false
        }
      } else {
        res = {
          show: false,
          readonly: false
        }
      }
      return res
    },
    closeFilterMenu(e) {
      if(this.mouseEnterTimer) return
      if (!this.FilterMenuIsShow&&!this.operateTopPopover) return
      let pageCode = window.location.pathname.split('/')[window.location.pathname.split('/').length-1]
      if(document.querySelector('.el-picker__popper')&&document.querySelector('.el-picker__popper').parentElement.contains(e.target)){
        e.stopPropagation()
        e.preventDefault()
        return false
      }
      if (e && ((document.querySelector(`.${pageCode}`) && document.querySelector(`.${pageCode}`).contains(e.target))&&(!(document.querySelector(".tr-filter-menu:not(.row)")&& document.querySelector(".tr-filter-menu:not(.row)").contains(e.target))) )) {
        if (_GroupsProxy && JSON.stringify(_GroupsProxy) != JSON.stringify(this.Groups)&&this.FilterMenuIsShow) {
          Funcs.Confirm(
            '',
            this.$q.lang.label.changeNotify,
            () => {
              this.filterQuery()
              this.FilterMenuIsShow = false
              this.operateTopPopover = false
            },
            () => {
              try {
                if (_GroupsProxy) {
                  _GroupsProxy.forEach(item => {
                    const index = this.Groups.findIndex(element => element.ID === item.ID);
                    if (index !== -1) {
                      this.Groups[index] = item;
                    }
                  });
                }
              } catch (error) {
              }
              setTimeout(() => {
                this.FilterMenuIsShow = false
                this.operateTopPopover = false
              }, 0);

            }
            ,
            true,
            {
              confirmButtonText: this.$q.lang.label.true,
              cancelButtonText: this.$q.lang.label.false,
              type: 'warning',
            },
          );

          return
        } else {
          this.FilterMenuIsShow = false
          this.operateTopPopover = false
        }
        e.stopPropagation()
        e.preventDefault()
        return false
      }

    },
    // 点击空白区域关闭
    stopPropagationByFilter(e) {
      if (e) {
        e.stopPropagation()
        e.preventDefault()
        return false
      }
    },
    openPanel(e) {
      if(this.mouseEnterTimer){
       return
      }
      if(this.mouseLeaveTime){
        window.clearTimeout(this.mouseLeaveTime)
        this.mouseLeaveTime = null
      }
      
      this.operateTopPopover = false

      if (this.FiltersIsShow||this.isShowCollapse!=='1') {
        return
      }

      this.FilterMenuIsShow = !this.FilterMenuIsShow
      if (e) {
        e.stopPropagation()
        e.preventDefault()
        return false
      }

    },
    onlyOpenPanel(e) {

      if(this.mouseEnterTimer){
        window.clearTimeout(this.mouseEnterTimer)
        this.mouseEnterTimer = null
      }
      this.mouseEnterTimer = window.setTimeout(() => {
        setTimeout(() => {
          window.clearTimeout(this.mouseEnterTimer)
          this.mouseEnterTimer = null
        }, 1000);
      
        this.operateTopPopover = false

        if (this.FiltersIsShow||this.isShowCollapse!=='1') {
          return
        }

        this.FilterMenuIsShow = true
        if (e) {
          e.stopPropagation()
          e.preventDefault()
          return false
        }
      }, 0);
      

    },
    onlyClosePanel(e) {
      if(this.mouseLeaveTime){
        window.clearTimeout(this.mouseLeaveTime)
        this.mouseLeaveTime = null 
      }
      this.mouseLeaveTime = window.setTimeout(() => {
        window.clearTimeout(this.mouseLeaveTime)
        this.mouseLeaveTime = null
        this.operateTopPopover = false

        if (this.FiltersIsShow||this.isShowCollapse!=='1') {
          return
        }

        this.FilterMenuIsShow = false
        if (e) {
          e.stopPropagation()
          e.preventDefault()
          return false
        }
      },200)
     

    },
    stopclosePanel(e) {
      if(this.mouseLeaveTime){
        window.clearTimeout(this.mouseLeaveTime)
        this.mouseLeaveTime = null
      }
      if(this.mouseEnterTimer){
        window.clearTimeout(this.mouseEnterTimer)
        this.mouseEnterTimer = null
      }
    },
    focusFilterDivDelayed() {
      console.log('========== focusFilterDivDelayed');
      setTimeout(() => {
        this.$refs.filterDiv.focus();
      }, 100);
    },
    checkAll() {
      this.$nextTick(() => {
        if (this.isCheckAll) {
          this.ConfigGroups.forEach(item => (item.IsShow = true));
        } else {
          this.ConfigGroups.forEach(item => (item.filter_isMust?'':(item.IsShow = false) ));
        }
      });
    },
    numberToString(
      nmb,
      local = readCookie?.('teld_locale') || 'zh-CN',
      useGrouping = false,
    ) {
      if (!(nmb && nmb.toString)) return nmb;

      let decimal = '.';
      let _precision =
        nmb.toString().indexOf(decimal) != -1
          ? nmb.toString().split(decimal)[1].length
          : 0;
      let precision = this.precision;
      if (!this.precision && this.precision != 0) {
        precision = _precision;
      }
      return new Intl.NumberFormat(local, {
        maximumFractionDigits: precision,
        minimumFractionDigits: precision,
        useGrouping: useGrouping,
      }).format(nmb);
    },
    stringToNumber(nmbStr, local = readCookie?.('teld_locale')) {
      if (!nmbStr && nmbStr != '0') return '';
      //千分位
      let group = new Intl.NumberFormat(readCookie?.('teld_locale'))
        .format(1111)
        .replace(/1/g, '');
      //小数点
      let decimal = new Intl.NumberFormat(readCookie?.('teld_locale'))
        .format(1.1)
        .replace(/1/g, '');
      let reversedVal = nmbStr.replace
        ? nmbStr
          .replace(new RegExp('\\' + group, 'g'), '')
          .replace(new RegExp('\\' + decimal, 'g'), '.')
        : nmbStr;
      return Number(reversedVal);
    },
    addFilterCommand(command) {
      switch (command) {
        case 'item':
          this.addItem();
          break;
        case 'group':
          this.addGroup();
          break;
        default:
          break;
      }
    },
    addFilterClick() {
      if (!this.FilterIsEasy) {
        return true;
      }
      this.addItem();
    },
    moreOperCommand(command) {
      this.operatePopover = false;
      switch (command) {
        case 'shiftEasy':
          this.shiftEasyMode();
          break;
        case 'shiftComp':
          this.shiftCompMode();
          break;
        case 'shiftClassic':
          this.shiftClassicMode();
          break;
        case 'delete':
          Funcs.Confirm(
            this.Term.Notify.confirmText,
            this.Term.Notify.delAll,
            () => {
              this.$parent.FilterGroups = [];
            },
            () => { },
            true,
            {
              confirmButtonText: this.Term.Notify.confirm,
              cancelButtonText: this.Term.Notify.cancel,
              type: 'warning',
            },
          );
          break;
        case 'close':
          this.$parent.FilterGroups.forEach(g => (g.IsOff = true));
          break;
        case 'open':
          this.openall(this.$parent.FilterGroups);
          break;
        case 'fieldsSet':
          this.ConfigGroups = this.GetConfigGroups();

          this.FilterDrawer = true;
          break;
        default:
          break;
      }
    },
    /**
     * 点击下拉选项会收起
     * 条件布局用的二级菜单这里希望点击一级菜单不收起
     * hack 处理，这里需要用原生 click 事件(.native)且捕获(.capture)
     */
    onClickLayoutSet(e) {
      if (this.$refs.layoutMenuRef) {
        const { x } = this.$refs.layoutMenuRef.getBoundingClientRect();
        if (e.clientX > x) {
          // console.log('点击了条件项目');
        } else {
          // console.log('点击了一级菜单');
          e.preventDefault();
          e.stopPropagation();
          return false;
        }
      }
    },
    //根据条件配置及用户条件，整合新的条件项
    GetConfigGroups() {
      let _groups = [];

      _groups = _.map(this.Groups, item => {
        return { ...item, IsShow: true };
      });

      this.Fields.filter(item => item.isQuery).forEach(_field => {
        //用户已经添加
        if (
          _groups.filter(
            g =>
              g.Code ==
              _field.tableAlias +
              '.' +
              (_field.tableAlias != '__UserDefineColumns'
                ? _field.fieldCode
                : _field.fieldAlias),
          ).length > 0
        ) {
          return;
        }

        let _config = {
          ColNum: 6,
          IsCommUse: true,
          InitValue: '',
          DependCodes: [],
          IsCompDepend: false,
        };
        try {
       
          if (_field.filter_classicConfig) {
            _config =
              typeof _field.filter_classicConfig == 'string'
                ? JSON.parse(_field.filter_classicConfig)
                : _field.filter_classicConfig;
            if(_config&&_config.helpTipContext&&_config.helpTipContextReferenceExpr){
              _config.helpTipContext = window.Funcs?.GetTerms(_config.helpTipContextReferenceExpr,_config.helpTipContext)||_config.helpTipContext
            }
          }
        } catch (e) {}

        let _initValue = {};
        if (!!_config.InitValue) {
          _initValue = this.$parent.GetInitValueByScript(
            _config.InitValue,
            _field,
            null,
          );
        }
        let placeholderContext={}
        if(_config&&_config.enablePlaceholder&&_config.placeholderContext){
       
          try {
            placeholderContext = this.$parent.GetValueByScript(
              _config.placeholderContext,
            _field,
            null,
          );
            eval('console.log(placeholderContext)')
          } catch (error) {
            eval('console.log(error)')
          }

        }
        //兼容历史数据，条件关系历史数据可能为汉字
        if (!!_field.field_condition) {
          let _list = [
            { Name: '等于', Code: '=' },
            { Name: '大于', Code: '>' },
            { Name: '大于等于', Code: '>=' },
            { Name: '小于', Code: '<' },
            { Name: '小于等于', Code: '<=' },
            { Name: '不等于', Code: '<>' },
            { Name: '包含', Code: 'contains' },
            { Name: '不包含', Code: 'notcontains' },
            { Name: '开始于', Code: 'startswith' },
            { Name: '结束于', Code: 'endswith' },
            { Name: '隶属', Code: 'i' },
            { Name: '非隶属', Code: 'notin' },
          ];
          let _his = _list.filter(item => item.Name == _field.field_condition);

          _his = _his[0] || {};
          _field.field_condition = !!_his.Code
            ? _his.Code
            : _field.field_condition;
        }

        let _condition = !!_field.field_condition
          ? [
            '=',
            '>',
            '>=',
            '<',
            '<=',
            '<>',
            'between',
            'contains',
            'notcontains',
            'in',
            'notin',
          ].includes(_field.field_condition)
            ? _field.field_condition
            : '='
          : ['date', 'time'].includes(_field.filter_inputWay) ||
            ['Int', 'DateTime', 'Date'].includes(_field.dataType)
            ? 'between'
            : '=';

        _groups.push({
          ID: _field.ID,
          Type: 'Filter',
          Relation: 'and',
          Code:
            _field.tableAlias +
            '.' +
            (_field.tableAlias != '__UserDefineColumns'
              ? _field.fieldCode
              : _field.fieldAlias),
          Name: _field.fieldName,
          Condition: _condition,
          Value: _initValue.Name || '',
          DataType: _field.dataType,
          ValueName: _initValue.Value || '',
          ValueType: 0,
          IsOff: false,
          Children: [],
          ColNum: _field.ColNum || 6,
          IsShow: false,
          enableHelpTip:_config.enableHelpTip,
          helpTipPlacement:_config.helpTipPlacement,
          helpTipContext  :_config.helpTipContext,
          helpTipContextReferenceExpr:_config.helpTipContextReferenceExpr,
          filter_isMust:_field.filter_isMust,
          ...placeholderContext
        });
      });
      return _groups;
    },
    addItem() {
      if (this.Fields.length == 0) {
        this.notify({
          message: this.Term.Notify.warningText_noField,
          type: 'warning',
        });
        return false;
      }

      //添加新条件时，选择的字段默认选中上一次的字段
      let _field = !!window.filter_select_field
        ? window.filter_select_field
        : this.Fields[0];
      var _id = this.getGuid();

      let _initValue = {};
      let _config = {
        ColNum: 6,
        IsCommUse: true,
        InitValue: '',
        DependCodes: [],
        IsCompDepend: false,
      };
      try {
        if (_field.filter_classicConfig) {
          _config =
            typeof _field.filter_classicConfig == 'string'
              ? JSON.parse(_field.filter_classicConfig)
              : _field.filter_classicConfig;
        }
      } catch (e) { }
      if (!!_config.InitValue) {
        _initValue = this.$parent.GetInitValueByScript(
          _config.InitValue,
          _field,
          null,
        );
      }

      //兼容历史数据，条件关系历史数据可能为汉字
      if (!!_field.field_condition) {
        let _list = [
          { Name: '等于', Code: '=' },
          { Name: '大于', Code: '>' },
          { Name: '大于等于', Code: '>=' },
          { Name: '小于', Code: '<' },
          { Name: '小于等于', Code: '<=' },
          { Name: '不等于', Code: '<>' },
          { Name: '包含', Code: 'contains' },
          { Name: '不包含', Code: 'notcontains' },
          { Name: '开始于', Code: 'startswith' },
          { Name: '结束于', Code: 'endswith' },
          { Name: '隶属', Code: 'i' },
          { Name: '非隶属', Code: 'notin' },
        ];
        let _his = _list.filter(item => item.Name == _field.field_condition);

        _his = _his[0] || {};
        _field.field_condition = !!_his.Code
          ? _his.Code
          : _field.field_condition;
      }

      this.Groups.push({
        ID: _id,
        Type: 'Filter',
        Relation: 'and',
        Code:
          _field.tableAlias +
          '.' +
          (_field.tableAlias != '__UserDefineColumns'
            ? _field.fieldCode
            : _field.fieldAlias),
        Name: _field.fieldName,
        Condition: !!_field.field_condition
          ? [
            '=',
            '>',
            '>=',
            '<',
            '<=',
            '<>',
            'between',
            'contains',
            'notcontains',
            'in',
            'notin',
          ].includes(_field.field_condition)
            ? _field.field_condition
            : '='
          : this.Mappings[_field.dataType] == 'string' &&
            _field.filter_dataValue != '@我'
            ? 'contains'
            : '=',
        Value: !!_initValue.Name
          ? _initValue.Name
          : this.Mappings[_field.dataType] == 'number'
            ? `<${this.Term.field.inputValue}>`
            : `<${this.Term.field.inputValue}>`,
        DataType: _field.dataType,
        ValueName: !!_initValue.Value
          ? _initValue.Value
          : this.Mappings[_field.dataType] == 'number'
            ? `<${this.Term.field.inputValue}>`
            : `<${this.Term.field.inputValue}>`,
        ValueType: 0,
        IsOff: false,
        Children: [],
      
      });

      //添加新条件，自动选中
      window['filter_change_timer'] = setTimeout(() => {
        let _dom = document.getElementById('filterName_' + _id);
        if (!_dom) {
          return;
        }
        _dom.setSelectionRange(0, 0);
        _dom.setSelectionRange(0, _dom.value.length);
        _dom.focus();
        _dom.click();
      }, 300);
    },
    addGroup() {
      if (this.Fields.length == 0) {
        this.notify({
          message: this.Term.Notify.warningText_noField,
          type: 'warning',
        });
        return false;
      }

      //添加新条件时，选择的字段默认选中上一次的字段
      let field = !!window.filter_select_field
        ? window.filter_select_field
        : this.Fields[0];
      var _id = this.getGuid();
      try {
        let a = {
          ID: this.getGuid(),
          Type: 'Group',
          Relation: 'and',
          Code: '',
          Name: '',
          Condition: '',
          Value: '',
          DataType: '',
          IsOff: false,
          Children: [
            {
              ID: _id,
              Type: 'Filter',
              Relation: 'and',
              Code:
                field.tableAlias +
                '.' +
                (field.tableAlias != '__UserDefineColumns'
                  ? field.fieldCode
                  : field.fieldAlias),
              Name: field.fieldName,
              Condition:
                this.Mappings[field.dataType] == 'string' &&
                  field.filter_dataValue != '@我'
                  ? 'contains'
                  : '=',
              Value:
                this.Mappings[field.dataType] == 'number'
                  ? `<${this.Term.field.inputValue}>`
                  : `<${this.Term.field.inputValue}>`,
              DataType: field.dataType,
              ValueName:
                this.Mappings[field.dataType] == 'number'
                  ? `<${this.Term.field.inputValue}>`
                  : `<${this.Term.field.inputValue}>`,
              ValueType: 0,
              IsOff: false,
              Children: [],
            },
          ],
        };
      } catch (error) {
        // console.log(error);
      }

      this.Groups.push({
        ID: this.getGuid(),
        Type: 'Group',
        Relation: 'and',
        Code: '',
        Name: '',
        Condition: '',
        Value: '',
        DataType: '',
        IsOff: false,
        Children: [
          {
            ID: _id,
            Type: 'Filter',
            Relation: 'and',
            Code:
              field.tableAlias +
              '.' +
              (field.tableAlias != '__UserDefineColumns'
                ? field.fieldCode
                : field.fieldAlias),
            Name: field.fieldName,
            Condition:
              this.Mappings[field.dataType] == 'string' &&
                field.filter_dataValue != '@我'
                ? 'contains'
                : '=',
            Value:
              this.Mappings[field.dataType] == 'number'
                ? '0'
                : `<${this.Term.field.inputValue}>`,
            DataType: field.dataType,
            ValueName:
              this.Mappings[field.dataType] == 'number'
                ? '0'
                : `<${this.Term.field.inputValue}>`,
            ValueType: 0,
            IsOff: false,
            Children: [],
          },
        ],
      });

      //添加新条件，自动选中
      window['filter_change_timer'] = setTimeout(() => {
        let _dom = document.getElementById('filterName_' + _id);
        if (!_dom) {
          return;
        }
        _dom.setSelectionRange(0, 0);
        _dom.setSelectionRange(0, _dom.value.length);
        _dom.focus();
        _dom.click();
      }, 300);
    },
    shiftFiltersFlod() {
      this.$parent.FiltersIsShow = !this.$parent.FiltersIsShow;

      this.$parent.setUserPlan();
    },
    //获取可用的条件项
    getFilters: function (groups, filters) {
      groups.forEach(group => {
        if (group.Type == 'Group') {
          if (group.IsOff) {
            return true;
          }

          this.getFilters(group.Children, filters);
        } else {
          if (!group.IsOff) {
            filters.push(group);
          }
        }
      });
    },
    isNumber: function (val) {
      let locale = readCookie?.('teld_locale') || 'zh-CN';
      //千分位
      let group = new Intl.NumberFormat(locale).format(1111).replace(/1/g, '');
      //小数点
      let decimal = new Intl.NumberFormat(locale).format(1.1).replace(/1/g, '');
      val = val.toString();
      let reversedVal = val.replace
        ? val
          .replace(new RegExp('\\' + group, 'g'), '')
          .replace(new RegExp('\\' + decimal, 'g'), '.')
        : val;
      val = Number(reversedVal);
      var RegexTest =
        /^[0-9]+\d*(\.\d*)?$|^0?\.\d*[1-9]\d*|^0+[1-9]\d*(\.\d*)?$/;
      return RegexTest.test(val);
    },
    isTimeStr(str) {
      if (!str) return false
      let _reg = /^[0-9,/:-\s]+$/;
      if (
        !isNaN(Date.parse(new Date(str.replace(/-/g, '/')))) &&
        isNaN(str) &&
        _reg.test(str)
      ) {
        return true;
      } else {
        return false;
      }
    },
    //检查用户输入，是否合法
    checkInput() {
      let _list = [];
      this.getFilters(this.Groups, _list);

      let _isChecked = true;
      try {
        _list.forEach(item => {
          if (
            [
              `<${this.Term.field.inputValue}>`,
              `<${this.Term.field.choiseField}>`,
            ].includes(item.Value)
          ) {
            if (!['isblank', 'isnotblank'].includes(item.Condition)) {
              this.checkNotify(item);
              _isChecked = false;
              throw new Error('');
            }
          } else if (item.ValueType == 0) {
            if (
              this.Mappings[item.DataType] == 'number' &&
              !['isblank', 'isnotblank'].includes(item.Condition)
            ) {
              if (item.Condition != 'between') {
                if (
                  !this.isNumber(item.Value) &&
                  !this.isNumber(item.ValueName)
                ) {
                  this.checkNotify(item);
                  _isChecked = false;
                  throw new Error('');
                }
              } else {
                item.Value.split('-').forEach(nb => {
                  if (_.trim(nb) != '' && !this.isNumber(_.trim(nb))) {
                    _isChecked = false;
                  }
                });

                if (!_isChecked) {
                  this.checkNotify(item);
                  throw new Error('');
                }
              }
            } else if (
              this.Mappings[item.DataType] == 'datetime' &&
              !['isblank', 'isnotblank'].includes(item.Condition) &&
              item.Value.indexOf('@') == -1
            ) {
              if (item.Condition != 'between') {
                if (!this.isTimeStr(item.Value)) {
                  this.checkNotify(item);
                  _isChecked = false;
                  throw new Error('');
                }
              } else {
                item.Value.split('-').forEach(nb => {
                  if (_.trim(nb) != '' && !this.isTimeStr(_.trim(nb))) {
                    _isChecked = false;
                  }
                });

                if (!_isChecked) {
                  this.checkNotify(item);
                  throw new Error('');
                }
              }
            } else if (
              this.Mappings[item.DataType] == 'string' &&
              !['isblank', 'isnotblank'].includes(item.Condition) &&
              !['=', '<>'].includes(item.Condition) &&
              _.trim(item.Value) == ''
            ) {
              this.checkNotify(item);
              _isChecked = false;
              throw new Error('');
            }
          }
        });
      } catch (e) { }
      return _isChecked;
    },
    //检查必填项
    checkMust() {
      let _list = [];
      this.getFilters(this.Groups, _list);

      let _isChecked = true;
      try {
        this.Fields.filter(item => item.isQuery).forEach(item => {
          //该项必填，1、必须有该条件项、2、经典模式必须有值
          if (!!item.filter_isMust) {
            let _filter = _list.filter(
              filter =>
                filter.Code ==
                item.tableAlias +
                '.' +
                (item.tableAlias != '__UserDefineColumns'
                  ? item.fieldCode
                  : item.fieldAlias),
            );
            _filter = _filter[0] || { Name: item.fieldName };

            if (!_filter.ID) {
              this.checkNotify(_filter, true);
              _isChecked = false;
              throw new Error('');
            }

            //当选择条件为【为空/不为空】时，本身就成为查询条件了，无需另输入值
            if (['isblank', 'isnotblank'].includes(_filter.Condition)) {
              return; // 不需要检查是否有输入值
            }

            if (
              !!this.FilterIsClassic &&
              (_.trim(_filter.Value) == '' || _.trim(_filter.ValueName) == '')
            ) {
              this.checkNotify(_filter, true);
              _isChecked = false;
              throw new Error('');
            }
          }
        });
      } catch (e) { }

      return _isChecked;
    },
    checkNotify(item, ismust) {
      try {
        // Funcs.Notify(
        //   this.Term.Notify.warningTitle,
        //   `“${item.Name}” ${!!ismust ? this.Term.Notify.warningText_ismust : this.Term.Notify.warningText_invalid}`,
        //   'warning',
        // );
        let message = '';
        if (!!ismust) {
          message = `“${item.Name}” ${this.Term.Notify.warningText_ismust}`;
        } else {
          message = `${this.Term.Notify.warningText_none} “${item.Name}”`;
        }
        this.notify({
          caption: this.Term.Notify.warningTitle,
          type: 'warning',
          message,
          // message: `“${item.Name}” ${!!ismust ? this.Term.Notify.warningText_ismust : this.Term.Notify.warningText_invalid}`,
        });
        if (!!ismust) {
          return;
        }

        let _input = document.getElementById('filterValue_' + item.ID);
        _input.setSelectionRange(0, 0);
        _input.setSelectionRange(0, _input.value.length);
        _input.focus();
        _input.click();
      } catch (e) { }
    },
    changeApply() {
      // alert('=========== changeApply Panel');
      if (this.checkInput() && this.checkMust()) {
        this.$parent.changeApply();
      }
    },
    async filterQuery() {
      // alert('=========== filterQuery Panel');

      if (this.checkMust()) {
        const { valid } = (await this.$parent.filterQuery()) || {};

        //	BFO20230522102421233经典模式，输入查询条件后： 1、点回车没有反应，要处理回车键。 2、鼠标点击查询后，经典条件被收起，用户如果没有点收起，不能自
        //valid&& this.shiftFiltersFlod();
      }
    },
    queryApply() {
      if (this.checkMust()) {
        this.$parent.queryApply();
      }
    },
    clearQuckFilterFilters(){
      this.$parent.clearQuckFilterFilters()
    },
    clearQuery() {
      Funcs.Confirm(
        this.Term.Notify.confirmText,
        this.Term.Notify.clearAll ?? '清空所有条件',
        () => {
          let clearQuickFilter = false
          if ((this.enableQuickFilter==='1' && this.FilterIsClassic)) {
         
            
            this.clearQuckFilterFilters()
          }
          if (clearQuickFilter) {
             this.$nextTick(() => {
            this.getQuickFilter()
          });
          }
          this.$parent.clearQuery();
        
        },
        () => { },
        true,
        {
          confirmButtonText: this.Term.Notify.confirm,
          cancelButtonText: this.Term.Notify.cancel,
          type: 'warning',
        },
      );
    },
    resetQuery() {
      this.$parent.resetQuery();
    },
    shiftEasyMode(old) {
      //当前复杂模式并且确实是复杂表达式，无法切换为简单模式
      if (
        !this.FilterIsEasy &&
        this.Groups.filter(g => {
          return g.Children.length > 0;
        }).length > 0
      ) {
        this.FilterModel_Data = old;
        this.notify({
          message: this.Term.Notify.shiftCheckText,
          type: 'warning',
        });
        return;
      }

      this.$parent.FilterIsClassic = false;
      this.$parent.FilterIsEasy = true;
      this.$parent.FiltersIsShow = true;
      this.$parent.FilterGroups = _.cloneDeep(this.$parent.ValuesGroups);
    },

    shiftCompMode() {
      this.$parent.FilterIsClassic = false;
      this.$parent.FilterIsEasy = false;
      this.$parent.FiltersIsShow = true;
      this.$parent.FilterGroups = _.cloneDeep(this.$parent.ValuesGroups);
    },
    shiftClassicMode(old) {
      if (
        !this.FilterIsEasy &&
        this.Groups.filter(g => {
          return g.Children.length > 0;
        }).length > 0
      ) {
        this.FilterModel_Data = old;
        this.notify({
          message: this.Term.Notify.shiftCheckClassicText,
          type: 'warning',
        });
        return;
      } else {
        //不允许出现重复项
        let _group = _.groupBy(this.Groups, 'Code');

        if (
          Object.keys(_group).filter(key => _group[key].length > 1).length > 0
        ) {
          this.FilterModel_Data = old;
          this.notify({
            message: this.Term.Notify.shiftCheckClassicText,
            type: 'warning',
          });
          return;
        }
      }

      this.$parent.FiltersIsShow = true;
      this.$parent.FilterIsEasy = true;
      this.$parent.FilterIsClassic = true;

      this.$parent.FilterGroups = _.cloneDeep(
        this.$parent.GetFieldGroups(this.$parent.FilterGroups, true),
      );
    },
    clearFilterValue(id) {
      let _filter = this.Groups.filter(item => item.Code == id);
      if ((this.enableQuickFilter==='1' && this.FilterIsClassic)) {
        let QuickFilter = _.cloneDeep(this.$refs?.fasr_quick_filter?.getQuickFilter()?.Filters || [])
        let _filterByQuickFilter = QuickFilter.filter(item => item.Code == id);
        let clearQuickFilter = false
        if(_filterByQuickFilter.length>0){
          let code = _filterByQuickFilter[0].Code.split('.')[1]
          this.$parent.setQuickFilterFilters({[code]:null},true)
          clearQuickFilter = true
        }else if (_filter.length > 0) {
        _filter[0].Value = '';
        _filter[0].ValueName = '';

        if (['isblank', 'isnotblank'].includes(_filter[0].Condition)) {
          _filter[0].Condition = '=';
        }
        return
      }
        if (clearQuickFilter) {
           this.$nextTick(() => {
            this.getQuickFilter()
          });
            
          }

      }else {
       
      if (_filter.length > 0) {
        _filter[0].Value = '';
        _filter[0].ValueName = '';

        if (['isblank', 'isnotblank'].includes(_filter[0].Condition)) {
          _filter[0].Condition = '=';
        }
        return
      }
      }

    },
    formatDataByLang(filter) {
      if (filter.Value === '' || filter.Value === null || filter.Value === undefined) return '';
      if(Array.isArray(filter.Value)) {
        return filter.Value.map(item => {
          return item.label
        }).join(',');
      }
      if (filter.Value.indexOf && filter.Value.indexOf('@') != -1)
        return filter.Value;
      let ParaContrl = '';
      if (this.Mappings[filter.DataType] == 'datetime') {
        ParaContrl = 'datetime';
        if (filter.Value.indexOf(' - ') != -1) {
          ParaContrl = 'datetimerange';
        }
        if (filter.Value.indexOf(':') == -1) {
          ParaContrl = 'date';
          if (filter.Value.indexOf(' - ') != -1) {
            ParaContrl = 'daterange';
          }
        }
      } else if (this.Mappings[filter.DataType] == 'date') {
        ParaContrl = 'date';
        if (filter.Value.indexOf(' - ') != -1) {
          ParaContrl = 'daterange';
        }
      } else if (
        this.Mappings[filter.DataType] == 'number' &&
        (filter.Condition == '之间' || filter.Condition == 'between')
      ) {
        ParaContrl = 'numberrange';
      }
      // console.log(
      //   '=======ParaContrl=======',
      //   ParaContrl,
      //   filter,
      //   this.Mappings[filter.DataType],
      // );

      let res = null;

      switch (ParaContrl) {
        case 'daterange':
          res = filter.Value.split(' - ')
            .map(item => DateTimeFormat_Date.format(new Date(item)))
            .join('-');
          break;
        case 'date':
          res = DateTimeFormat_Date.format(new Date(filter.Value));
          break;
        case 'datetime':
          res = DateTimeFormat_Date_Time.format(new Date(filter.Value));
          break;
        case 'datetimerange':
          // console.log('======datetimerange=====', filter.Value);
          if (filter.Value.split('-').length == 2) {
            res = filter.Value.split('-')
              .map(item =>
                DateTimeFormat_Date_Time.format(new Date(item.trim())),
              )
              .join(' - ');
          } else {
            res = filter.Value.split(' - ')
              .map(item =>
                DateTimeFormat_Date_Time.format(new Date(item.trim())),
              )
              .join(' - ');
          }
          break;
        case 'number':
          res = isNaN(filter.Value)
            ? filter.Value
            : this.numberToString(filter.Value);
          break;
        default:
          break;
      }
      if (
        this.Mappings[filter.DataType] == 'number' &&
        ParaContrl != 'numberrange'
      ) {
        res = isNaN(filter.Value)
          ? filter.Value
          : this.numberToString(filter.Value);
      } else if (
        this.Mappings[filter.DataType] == 'number' &&
        ParaContrl == 'numberrange'
      ) {
        res = (Array.isArray(filter.Value) ? filter.Value : (filter.Value.split('-')))
          .map(item => this.numberToString(item.trim()))
          .join('-');
      }
      if (res || res === 0) {
        return res;
      }
      return filter.Value;
    },
    getValueLabelText: function (filter) {
      // console.log('=======filter======', filter);
      let _text =
        filter.Name +
        " <span class='filter-curr-condition-text'>" +
        this.getConditionText(filter) +
        '</span> ';

      if (filter.Value === null) {
        return _text;
      }

      if (filter.ValueType === 0) {
        _text +=
          " <span class='filter-curr-condition-value'>" +
          this.formatDataByLang(filter) +
          '</span> ';
      } else {
        _text += '[' + filter.Value + ']';
      }

      return _text;
    },
    getValueLabelTitle: function (filter) {
      let _title = filter.Name;

      // if (!["isblank", "isnotblank"].includes(filter.Condition))
      // {
      //   _title += (' ' + this.getConditionText(filter));
      // }

      return _title;
    },
    getConditionText: function (filter) {
      let _conds = this.Conditions[
        this.Mappings[filter.DataType] || 'string'
      ].filter(item => {
        return (
          item.Code == filter.Condition ||
          item.Name == filter.Condition ||
          item.Text == filter.Condition
        );
      });
      return _conds.length == 0 ? Terms.title.notMapped : _conds[0].Sign;
    },
    focusMoreRef() {
      setTimeout(() => {
        this.$refs.more.$el.focus();
      });
    },
    closeFieldDrawer: function () {
      this.FilterDrawer = false;
    },
    sureFieldDrawer: function () {
      this.$parent.FilterGroups = _.cloneDeep(
        this.ConfigGroups.filter(item => !!item.IsShow),
      );
      this.FilterDrawer = false;
    },
    //获取可用的条件项
    openall: function (groups) {
      groups.forEach(group => {
        group.IsOff = false;

        if (group.Type == 'Group') {
          this.openall(group.Children);
        }
      });
    },
    showLayoutMenu: function () {
      if (this.$refs.layoutMenuRef.getBoundingClientRect().width) return;
      this.$refs.layoutMenuRef.removeAttribute('style');
      this.$refs.layoutMenuRef.style.opacity = 0;
      this.layoutMenuVisible = true;
      this.$nextTick(() => {
        const BCR = this.$refs.layoutMenuRef.getBoundingClientRect();
        const width = window.innerWidth;
        const elDropdown = document.querySelector('.operatePopover');
        // console.log(' console.log(BCR,width)', BCR, width);
        if (BCR.x + BCR.width > width - 30) {
          this.$refs.layoutMenuRef.style.left =
            -BCR.width * 2 -
            (window.readCookie && readCookie?.('teld_locale') == 'pt-BR'
              ? 62
              : 0) +
            'px';
        } else {
          this.$refs.layoutMenuRef.style.right = 0;
        }
        this.$refs.layoutMenuRef.style.opacity = 1;
      });
    },
    hideLayoutMenu: function () {
      this.layoutMenuVisible = false;
    },
    layoutUpdate: function (num) {
      this.operatePopover = false;
      this.layoutMenuVisible = false;
      this.$nextTick(() => {
        this.Groups.forEach(group => {
          group.ColNum = num;
        });

        this.focusMoreRef();
      });
    },
    getTermsValue: function (flag) {
      if (flag == 'deleteItem') {
        return this.Term.title.deleteItem;
      }

      return '';
    },
    getGuid() {
      function t() {
        return ((65536 * (1 + Math.random())) | 0).toString(16).substring(1);
      }
      return (
        t() + t() + '-' + t() + '-' + t() + '-' + t() + '-' + t() + t() + t()
      );
    },
    onMove() {
      // console.log('=== onMove ===', this.isMobile);
      // 移动端时禁用拖动功能
      if (this.isMobile) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss">
@import url(./style/element-ui-col.scss);



.tr-filter-menu-classic {
  display: none;
}
.filter-values-panel .icon-t-filter:hover {
  color: var(--t-color);
}
.filter-values-panel button.q-btn {
  //padding: 4px 12px !important;
  //min-width: 0px;
}

.tr-filter-menu-classic-show.tr-filter-menu-classic {
  display: block;
}

.tr-filter-menu-classic .filter-groups-panel>div>span {
  display: inline-block;
  width: 360px !important;
  font-size: 14px;

}

.tr-filter.tr-filter-menu-classic .filter-item-outer-classic {
  padding: 0 !important;
}

.tr-filter.tr-filter-menu-classic .filter-item-panel-classic {
  height: 30px !important;
}

.tr-filter-menu-classic .filter-groups-panel>div {

  display: flex !important;
  flex-wrap: wrap;
  max-height: 252px;
  overflow: auto;
  gap: 12px;
}

.tr-filter.tr-filter-menu-classic .filter-opers-panel {
  float: right;
}

.tr-filter.tr-filter-menu-classic .filter-group-classic {
  max-width: 360px !important;
  height: 32px !important;
  overflow: hidden;
}

.tr-filter-menu-classic {
  padding: 24px 12px 18px 24px !important;
}

.filter-values-panel>span {
  margin: 0 !important;
  // padding: 0 !important;

}

.filter-values-panel {
  display: flex;
  align-items: center;
  gap:16px 12px;
  user-select: none;
  flex-wrap: wrap;
  min-height: 32px;
}

:root {
  --color-level-1: rgba(0, 0, 0, 0.9); // #191919;
  /**input */
  --color-level-2: #333333;
  /** */
  --color-level-3: #707070;
  /**label */
  --color-level-4: #adadad;
  /**placeholder */

  --color-text-alpha-2: rgba(0, 0, 0, 0.9);
  /**input #191919*/
  --color-text-alpha-2: rgba(0, 0, 0, 0.8);
  /** #333333*/
  --color-text-alpha-3: rgba(0, 0, 0, 0.56);
  /**label #707070*/
  --color-text-alpha-4: rgba(0, 0, 0, 0.32);
  /**placeholder #adadad*/
}

/**
 *移动端样式调整
 */
/*点清空确认框太宽问题*/
body.mobile .el-message-box {
  width: 85%;
}

/*帮助弹窗的宽度太大（绝对布局，宽度100%，left=0 top=0），调整出空白且居中*/
body.mobile .tsh-popup-wrapper>.tsh-overlay-content {
  width: 94%;
  left: 3%;
}

.s-focused {
  &:focus-visible {
    outline: none;
    background-color: #f0f2f3;
  }
}

.svg-icon {
  height: 14px;
  vertical-align: middle;
  overflow: hidden;
  fill: currentColor;
}

.filter-field-config-item {
  line-height: 32px;
  height: 32px;
  color: var(--color-text-alpha-2);
}

.filter-field-config-item:hover {
  color: var(--t-color);
}

.adj-oper-panel {
  display: none;
  position: absolute;
  top: 20px;
  min-width: 156px;
  padding-bottom: 4px;
  z-index: 999;
  text-align: left;
}

.adj-oper-item {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: 12px 2px 0px 0px;
  text-align: center;
  vertical-align: middle;
  background-color: var(--t-color);
  color: #efefef;
  font-size: 12px;
  border-radius: 2px;
}

.adj-oper-item:hover {
  color: #fff;
}

.adj-oper-item-active {
  /* border-bottom: 2px solid #ff9540; */
}

.tr-filter-menu {
  padding: 8px 0;
  color: var(--color-text-alpha-2);

  .m-list {
    .item {
      padding: 0 16px;
      line-height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all ease 0.1s;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-wrap: normal;
      margin-bottom: 1px;

      &:hover,
      &:focus-visible {
        outline: none;
        background-color: #f0f2f5;
      }

      &.z-on {
        color: var(--t-color);
        background-color: #f0f2f5;

        &:hover,
        &:focus-visible {
          background-color: #e6f2fb;
        }
      }
    }
  }

  .operateMore .title {
    // margin: 12px 0;
    // display: flex;
    // align-items: center;
    padding: 0 16px;
    line-height: 32px;

    >i:first-child {
      position: relative;
      top: -2px;
      margin-right: 8px;
    }

    &.z-readonly {
      color: var(--color-text-alpha-3);
    }

    &:focus-visible {
      outline: none;
      background-color: #f0f2f3;
    }
  }

  .operateMore .groups {
    margin-top: 17px;
    padding-left: 17px;
  }

  .operateMore .groups .radio {
    margin-bottom: 14px;
    display: block;
  }

  .operateMore .groups .condition {
    margin-bottom: 14px;
    cursor: pointer;
  }
}

.tr-filter-menu-item {
  box-sizing: border-box;
  padding: 0 16px;
  width: 100%;
  display: flex;
  line-height: 32px;
  align-items: center;
  justify-content: space-between;

  .svg-icon {
    line-height: 32px;
  }

  &.z-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.tr-filter {
  position: relative;
  background-color: #fff;
  outline: none;

  .display-inline-block {
    display: inline-block;
  }

  .operatePopover {
    padding: 16px 16px 12px 16px !important;
  }

  .menu-item-cheked {
    background-color: #f0f2f5;
  }

  .el-picker-panel [slot='sidebar'],
  .el-picker-panel__sidebar {
    /* width: 90px !important; */
  }

  .el-picker-panel__shortcut {
    font-size: 12px !important;
    padding: 0px 2px !important;
    border-bottom: 1px dotted #dedede;
  }

  .el-picker-panel__shortcut {
    text-align: center;
  }

  .el-dropdown-menu {
    border: 1px solid #dedede !important;
  }

  .popper__arrow {
    border-bottom-color: #dedede !important;
  }

  .el-dropdown-menu {
    /* max-height: 550px;
  overflow-y: auto !important; */
  }

  .el-tooltip__popper {
    border: 1px solid #dedede !important;
  }

  .el-popper[x-placement^='bottom'] {
    margin-top: 6px !important;
  }

  .el-button--text {
    display: none;
  }

  .el-select {
    width: 100%;
    position: absolute;
    left: 0%;
    top: 100%;
  }

  .el-select-panel {
    min-width: 120px;
    width: 100%;
  }

  .el-select input {
    display: none;
  }

  .el-select .el-select__tags {
    display: none;
  }

  .el-select .el-input__suffix-inner {
    display: none;
  }

  .el-radio__input.is-checked .el-radio__inner {
    color: var(--t-color);
    background: var(--t-color);
    border-color: var(--t-color);
  }

  .el-radio__input:hover .el-radio__inner {
    border-color: var(--t-color);
  }

  .el-radio__input.is-checked+.el-radio__label {
    color: var(--t-color);
  }

  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: 0 0 2px 2px var(--t-color);
  }

  .line {
    padding: 0;
    margin: 0;
    border-top: 1px solid #f0f2f5;
    margin-top: 10px;
  }

  .filter-info-panel {
    display: inline-block;
    /* margin: 2px 0px 2px 8px; */
    height: 30px;
    line-height: 30px;
    background-color: #fafafa;
    font-size: 14px;
    border-radius: 2px;
    border: 1px solid #ededed;
    position: relative;
  }

  .filter-group-empty {
    padding-right: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理透明度,将80%替换为--t-color-opacity*/.8));
  }

  .filter-values-text {
    // padding-right: 10px;
    display: inline-block;
    line-height: 30px;
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理透明度,将80%替换为--t-color-opacity*/.8));
  }

  .filter-values-item {
    position: relative;
    padding: 0px 24px 0px 0px;
    margin-right: 16px;
    display: inline-block;
    line-height: 24px;
    min-width: 60px;
    /* border: 1px solid #e9f5ff; */
    /* border-radius: 2px; */
    /* background-color: #e9f5ff; */
    /* color: #333; */
    color: var(--color-text-alpha-2);
    cursor: pointer;
  }

  .filter-values-item {
    background-color: #f5f5f5;
    padding: 3px 8px;
    border-radius: 4px;
  }

  /**
 * 移动端-经典模式-已选条件
 * - 一行一个
 * - 注意右侧与下面的条件项目对齐
 * - 清空与收折按钮单独成行
 */
  .filter-values-item__mobile {
    display: block;
    margin-bottom: 4px;
    margin-right: 12px;
  }

  .filter-values-item-clear {
    position: relative;
    display: inline-block;
    line-height: 24px;
    cursor: pointer;
    /* padding: 0px 4px; */
    margin-right: 8px;
    text-align: center;
    // color: var(--t-color);
    color: rgba(0,0,0, var(--t-color-opacity, /*批量处理透明度,将80%替换为--t-color-opacity*/.8));
    border: none;

    &:hover,
    &:focus-visible {
      outline: none;
      color: rgba(var(--t-color-rgb), var(--t-color-opacity, /*批量处理透明度,将80%替换为--t-color-opacity*/0.8));
      // text-shadow: 2px 2px 2px rgba(var(--t-color-rgb), 0.5);
    }

    &:focus-visible {
      font-weight: bold;
    }
  }

  .filter-values-item-clear:hover {
    color: var(--t-color);
  }

  .filter-values-item {
    cursor: default;
  }

  .filter-values-item-text {
    user-select: none;
    cursor: default;
  }

  .filter-values-item-oper {
    position: relative !important;
    right: 0px;
    text-align: center;
    font-weight: bold;
    // width: 20px;
    cursor: pointer !important;
    padding: 0 0px 0 4px;
  }

  .filter-values-item-oper:hover {
    color: var(--t-color);
  }

  .filter-values-oper {
    display: inline-block;
    width: 26px;
    padding-left: 2px;
    line-height: 30px;
    text-align: left;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
  }

  .filter-values-oper:hover {
    color: var(--t-color);
  }

  .filter-info-oper {
    display: inline-block;
    width: 30px;
    text-align: center;
    border-radius: 2px;
    border-right: 1px solid #ededed;
    cursor: pointer;
    font-weight: bold;
  }

  .filter-info-oper:hover {
    background-color: #fffaf6;
    border-right: 1px solid #ededed;
  }

  .filter-mode-easy {
    color: #4dc238;
  }

  .filter-mode-comp {
    color: #ff9540;
  }

  .filter-info-text {
    height: 95%;
    width: 80px;
    padding: 0px 4px;
    border: none;
    outline: none;
  }

  .filter-input-down {
    border: none;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    right: 40px;
  }

  .filter-panel {
    font-size: 14px;
    position: relative;
  }

  .filter-field-config-title {
    height: 60px;
    margin: 0 10px;
    border-bottom: 2px solid rgba(247, 248, 250, 1);
    font-size: 18px;
    line-height: 60px;
    text-indent: 20px;
  }

  .filter-field-config-bottom {
    position: absolute;
    bottom: 0px;
    right: 0;
    padding-bottom: 20px;
    /* padding-right: 20px; */
    width: 100%;
    /* text-align: right; */
    display: flex;
    justify-content: end;
    padding-right: 20px;
  }

  .filter-layoutset-icon {
    margin: 0 0 0 8px;
  }

  .filter-layoutset-menu {
    /* padding: 0px !important; */
    position: absolute;
    top: calc(100% - 42px);

    transform: translateX(100%);
    border-radius: 4px;
    padding: 6px 0;

    background-color: #fff !important;
    color: #606266 !important;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }

  .filter-layoutset-menu:hover {
    background-color: #fff !important;
    color: #606266 !important;
  }

  .filter-layoutset-panel {
    margin-left: 0px;
  }

  .filter-layoutset-item {
    line-height: 30px;
    /* padding-left: 47px; */
    padding: 0 16px;
  }

  .filter-layoutset-item:hover {
    background-color: var(--t-color-background);
    color: var(--t-color);
  }

  .filter-group {
    position: relative;
    line-height: 28px;
    height: 32px;
    border: 1px dotted #fff;
    border-radius: 3px;
    cursor: pointer;
  }

  .filter-group:hover {
    border-color: #ccc;
  }

  .filter-group-pc {
    display: inline-block;
  }

  .filter-group-mobile {
    display: block;
  }

  .filter-groups-item-panel {
    display: inline-block;
    float: left;
    max-height: 30px;
  }

  .filter-group-first {
    margin-left: 0px !important;
  }

  .filter-group-classic {
    max-width: 50%;
    /* margin: 2px; */
  }

  .filter-relation-active {
    background-color: #ff9540 !important;
    color: #fff !important;
  }

  .filter-group .filter-group {
    border-color: #fff;
  }

  .filter-group .filter-group .filter-group {
    border-color: #fff;
  }

  .filter-group:hover {
    border-color: #ff9540;
  }

  .filter-group:hover .filter-relation-first {
    /* display: initial; */
  }

  .filter-group .filter-group:hover {
    border-color: #4dc238;
  }

  .filter-group .filter-group .filter-group:hover {
    border-color: #0078d4;
  }

  .filter-list {
    /* padding: 0px 6px 0px 2px; */
  }

  .filter-list::before {
    content: '(';
    font-size: 16px;
    color: #ff9540;
    /* font-weight: bold; */
  }

  .filter-list::after {
    content: ')';
    font-size: 16px;
    color: #ff9540;
    /* font-weight: bold; */
  }

  .filter-group:hover .filter-list::before {
    color: #ff9540;
    /* color: #606266; */
  }

  .filter-group:hover .filter-list::after {
    color: #ff9540;
    /* color: #606266; */
  }

  .filter-group .filter-group .filter-list::before {
    color: #4dc238;
    /* color: #606266; */
  }

  .filter-group .filter-group .filter-list::after {
    color: #4dc238;
    /* color: #606266; */
  }

  .filter-group:hover .filter-group .filter-list::before {
    color: #4dc238;
    /* color: #606266; */
  }

  .filter-group:hover .filter-group .filter-list::after {
    color: #4dc238;
    /* color: #606266; */
  }

  .filter-group .filter-group .filter-group .filter-list::before {
    color: #0078d4;
    /* color: #606266; */
  }

  .filter-group .filter-group .filter-group .filter-list::after {
    color: #0078d4;
    /* color: #606266; */
  }

  .filter-group:hover .filter-group .filter-group .filter-list::before {
    color: #0078d4;
    /* color: #606266; */
  }

  .filter-group:hover .filter-group .filter-group .filter-list::after {
    color: #0078d4;
    /* color: #606266; */
  }

  .filter-item {
    /* display: inline-block; */
    /* border: 1px solid #fff; */
  }

  .filter-item:hover {
    /* border: 1px solid #dedede; */
  }

  .filter-item-outer {
    position: relative;
    margin: 2px;
    padding: 2px;
     //line-height: 0px; 
    // line-height: 22px;
    border: 1px dotted #fff;
    border-radius: 3px;
    cursor: pointer;
  }

  .filter-item-outer:hover {
    border-color: #ccc;
  }

  .filter-item-outer-pc {
    display: inline-block;
  }

  .filter-item-outer-mobile {
    display: block;
  }

  .filter-item-outer-easy {
    border-color: #ccc !important;
  }

  .filter-item-outer-classic {
    border: none !important;
    width: 100%;
    padding: 0px 20px 16px 0px !important;
    margin: 0px !important;
    cursor: auto !important;
    line-height: 0;
  }

  .filter-item-panel-classic {
    width: 100%;
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
  }

  ::v-deep .filter-item-panel-classic:hover {
    border: 1px solid var(--color-hover);
  }

  .filter-name {
    height: 18px;
    border-radius: 2px;
    font-size: 14px !important;
    border: 1px solid #fff;
    // border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    text-overflow: ellipsis;
    color: var(--color-text-alpha-2);
  }

  input.filter-name {
    border: none;
  }

  .filter-name:hover {
    background-color: var(--t-color);
    color: #fff;

    // border: 1px solid transparent;
  }

  .filter-name:focus-visible {
    // border: 1px solid #888;
    cursor: text;
  }

  .filter-name-panel-classic {
    line-height: 30px;
    text-indent: 5px;
    background-color: #fafafa;
    cursor: move !important;
    border-radius: 2px 0 0 2px;
  }

  .filter-name-panel-classic-border {
    border-right: 1px dotted #ededed;
  }

  .filter-name-input-classic {
    /* background-color: #fafafa; */
    background-color: rgba(250, 250, 250, 1);
    border: none !important;
    height: 30px;
    box-sizing: inherit !important;
    text-indent: 6px;
    cursor: pointer;
    outline: none;
    text-overflow: ellipsis;
    border-radius: 2px 0 0 2px;
    color: var(--color-text-alpha-3);
  }

  .filter-condition {
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 14px !important;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
  }

  .filter-condition:hover {
    background-color: var(--t-color);
    color: #fff !important;
  }

  .filter-condition-panel-classic {
    display: inline-block;
    line-height: 30px;
    text-align: center;
    border-left: 1px dotted #dedede;
    border-right: 1px dotted #ededed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    cursor: pointer;
  }

  .filter-condition-panel-classic:focus-visible {
    background-color: #f0f2f3;
  }

  .filter-condition-classic {
    width: 100%;
    line-height: 30px;
    padding: 0px !important;
    font-size: 14px !important;
    vertical-align: baseline;
    display: inline-block;
    color: #999;
    color: var(--color-text-alpha-4);
  }

  .filter-condition-classic:hover {
    color: var(--t-color);
  }

  .filter-value {
    padding: 0px 2px;
    height: 18px;
    border: 1px solid #fff;
    border-radius: 2px;
    font-size: 14px !important;
    /* font-weight: bold; */
    cursor: pointer;
    outline: none;
    color: var(--color-text-alpha-2);
  }

  .filter-value-input-classic {
    height: 30px;
    border: none !important;
    outline: none !important;
    font-weight: normal !important;
    /* color: #000 !important; */
    color: var(--color-text-alpha-2) !important;
    box-sizing: inherit !important;
    border: 1px solid #fff;
    text-indent: 4px;
    border-radius: 0 2px 2px 0;
  }

  .filter-value-input-classic:focus,
  .filter-value-input-classic:hover {
    outline: 0px !important;
    border: 0px !important;
    box-sizing: inherit !important;
  }

  .filter-value-input-classic:focus-visible {
    background-color: #f0f2f5;
  }

  .filter-value-input-classic::-webkit-input-placeholder {
    /* color: #999; */
    color: var(--color-text-alpha-4);
  }

  .filter-value-input-classic::placeholder {
    color: var(--color-text-alpha-4);
  }

  .filter-value-panel {
    position: relative;
  }

  .filter-value-panel-classic {
    position: relative;
    display: inline-block;
  }

  .filter-value[readonly]:hover {
    background-color: var(--t-color);
    color: #fff !important;
  }

  .filter-value:not([readonly]):hover {
    background-color: var(--t-color);
    color: #fff !important;
  }

  .filter-value:not([readonly]):focus-visible {
    // border: 1px solid #888;
    cursor: text;
  }

  .filter-value-input-classic[readonly]:hover {
    background-color: #ffffff !important;
    color: #000 !important;
  }

  .filter-value-input-classic:not([readonly]):hover {
    background-color: #ffffff !important;
    color: #000 !important;
  }

  .filter-item-value-numberrange {
    height: 30px;
    width: 100%;
    display: inline-block;
    line-height: 30px;
  }

  .filter-item-value-numberrange-panel {
    width: 100%;
    display: inline-block;
  }

  .filter-value-range-classic {
    font-size: 14px !important;
    font-weight: normal;
    cursor: pointer;
    outline: none;
    text-align: center;
    border: none;
    height: 28px;
  }

  .filter-value-icon {
    position: absolute;
    right: 3px;
    top: 4px;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #999;
    background-color: #fff;
  }

  .filter-value-icon:hover,
  .filter-value-icon:focus-visible {
    color: var(--t-color);
    background-color: #fafafa;
  }

  .filter-value-clear {
    position: absolute;
    right: 26px;
    top: 6px;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    line-height: 16px;
    text-align: center;
    color: #999;
    background-color: #fafafa;
    cursor: pointer !important;
  }

  .filter-value-clear:hover,
  .filter-value-clear:focus-visible {
    color: var(--t-color);
    background-color: #ededed;
  }

  .filter-value-clear-text {
    right: 6px !important;
  }

  .filter-relation {
    text-align: center;
    padding: 1px 5px;
    background-color: #ededed;
    border-radius: 2px;
    font-size: 14px;
    color: #606266;

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 10px 1px rgba(#000, 0.2);
    }
  }

  .filter-relation-first {
    /* display: none; */
  }

  .filter-relation-and {
    background-color: #fff1dd;
  }

  .filter-relation-or {
    background-color: #cdf0e8;
  }

  .filter-relation:hover {
    background-color: var(--t-color);
    color: #fff;
  }

  .filter-group .filter-group .filter-relation:hover {
    /* background-color: #4dc238; */
    /* color: #fff; */
  }

  .filter-group .filter-group .filter-group .filter-relation:hover {
    /* background-color: #ff9540; */
    /* color: #fff; */
  }

  .filter-group-oper {
    text-align: center;
    color: #000;
    border-radius: 2px;
    visibility: hidden;
  }

  .filter-group-oper i {
    font-size: 8px;
    padding: 2px 1px;
  }

  .filter-group .filter-list .filter-name {
    /* color: #0078d4 !important; */
  }

  .filter-group .filter-list .filter-condition {
    /* color: #0078d4 !important; */
  }

  .filter-group .filter-list .filter-condition:hover {
    /* color: #fff !important; */
  }

  .filter-group .filter-list .filter-value {
    /* color: #0078d4 !important; */
  }

  .filter-group .filter-list .filter-value[readonly]:hover {
    /* color: #fff !important; */
  }

  .filter-group .filter-group .filter-name {
    /* color: #4dc238 !important; */
  }

  .filter-group .filter-group .filter-condition {
    /* color: #4dc238 !important; */
  }

  .filter-group .filter-group .filter-value {
    /* color: #4dc238 !important; */
  }

  .filter-group .filter-group .filter-group .filter-name {
    /* color: #ff9540 !important; */
  }

  .filter-group .filter-group .filter-group .filter-condition {
    /* color: #ff9540 !important; */
  }

  .filter-group .filter-group .filter-group .filter-value {
    /* color: #ff9540 !important; */
  }

  /*  .filter-group i:hover {
  background-color: #0078d4;
  color: #fff;
}

 .filter-group .filter-group i:hover {
  background-color: #4dc238;
  color: #fff;
}

 .filter-group .filter-group .filter-group i:hover {
  background-color: #ff9540;
  color: #fff;
} */

  .filter-group:hover .filter-group-oper {
    /* color: #0078d4; */
    visibility: inherit;
  }

  .filter-group .filter-group:hover .filter-group-oper {
    /* color: #4dc238; */
    visibility: inherit;
  }

  .filter-group .filter-group .filter-group:hover .filter-group-oper {
    /* color: #ff9540; */
    visibility: inherit;
  }

  .filter-group-off .filter-list:before {
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-list::after {
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-list .filter-name {
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-list .filter-condition {
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-list .filter-value {
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-item-off {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32);
  }

  .filter-item-off .filter-name {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-item-off .filter-condition {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-item-off .filter-value {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off,
  .filter-item-off {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-relation {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-name {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-condition {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .filter-group-off .filter-value {
    text-decoration: line-through;
    text-decoration-color: rgb(0, 0, 0, 0.32);
    text-decoration-style: solid;
    color: rgb(0, 0, 0, 0.32) !important;
  }

  .menu-item-cheked {
    background-color: #ededed;
  }

  .el-date-editor {
    position: absolute;
    top: 100%;
    left: 20%;
    border: none;
    width: 0px;
    height: 0px;
    padding: 0px !important;
  }

  .el-date-editor span {
    display: none !important;
  }

  .el-date-editor i {
    display: none !important;
  }

  .el-date-editor input {
    width: 0px !important;
    height: 0px !important;
    border: none !important;
  }

  /*  .filter-curr-condition-text
{
  color: #999;
} */
  .filter-curr-condition-value {
    /* font-weight: bold; */
    word-break: break-all;
  }

  .filter-opers-panel {
    position: relative;
    display: inline-block;
    float: left;
    // padding: 4px 0 0;
  }

  .inline-block-panel {
    display: inline-block !important;
  }

  .block-panel {
    display: block !important;
  }

  .filter-oper-icon-panel {
    display: inline-block;
    position: relative;
    float: left;
  }

  .filter-oper-add {
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 2px;
    color: #606266;
    font-size: 14px;
    display: inline-block;
    margin: 2px;
  }

  .filter-oper-add:hover {
    border-color: rgba(0, 0, 0, 0);
    color: #fff;
    background-color: var(--t-color);
  }

  .filter-oper-flod {
    cursor: pointer;
    border: 1px dotted #ccc;
    text-align: center;
    border-radius: 2px;
    font-size: 14px;
    padding: 3px 0px;
    margin: 0px 4px;
  }

  .filter-oper-flod:hover {
    border-color: rgba(0, 0, 0, 0);
    color: #fff;
    background-color: var(--t-color);
  }

  .filter-oper-apply {
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 2px;
    font-size: 14px;
    display: inline-block;
    margin: 2px;
    float: left;
  }

  .filter-oper-apply:hover {
    border-color: rgba(0, 0, 0, 0);
    color: #fff;
    background-color: var(--t-color);
  }

  .filter-oper-apply i {
    font-weight: bold;
    font-size: 14px;
  }

  .filter-oper-more {
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 2px;
    font-size: 14px;
    display: inline-block;
    margin: 2px;
  }

  .filter-oper-more-classic {
    //padding: 2px !important;
  }

  .oper-mode-classic {
    margin-top: 2px;
  }

  .oper-mode-classic-not {
    float: left;
  }

  .oper-mode-easy {}

  .oper-mode-comp {}

  .filter-oper-more:hover {
    border-color: rgba(0, 0, 0, 0);
    color: #fff;
    background-color: var(--t-color);
  }

  .filter-oper-more i {
    font-size: 12px;
  }

  .filter-button {
    display: inline-block;
    position: relative;
    cursor: pointer;
    border: solid 1px rgba(0, 0, 0, 0.17);
    border-radius: 2px;
    font-size: 14px;
    margin: 4px 4px 4px 0px;
  }

  .filter-button:hover {
    color: var(--color-hover);
    background-color: #fff !important;
    border: 1px solid var(--color-hover) !important;
  }

  .filter-button-mini {
    margin: 2px 2px 0px 4px !important;
  }

  .filter-button-active {
    background-color: var(--t-color);
    border: 1px solid var(--t-color);
    color: #fff;
  }

  .filter-button-active:hover {
    color: rgba(255, 255, 255, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
    background-color: var(--color-hover) !important;
    border: 1px solid var(--color-hover) !important;
  }

  .filter-button-content {
    /* line-height: 30px; */
    /* padding: 0px 10px; */
    line-height: 0;
    height: 100%;
    max-height: 30px;
    padding: 5px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filter-button-content-mini {
    line-height: 26px;
    padding: 0px 10px;
  }

  .filter-button-icon {
    display: inline-block;
    line-height: normal !important;
    font-size: 12px !important;
    color: inherit !important;
    margin-right: 8px;
    width: 12px;
    height: 12px;
  }

  .filter-button-icon .dx-icon {
    vertical-align: middle !important;
  }

  .filter-button-text {
    display: inline-block;
    /* width: 36px;
  margin: 0px 6px;
  text-align: center; */
  }

  .text-color-main {
    color: var(--color-text-alpha-2);
  }
}
.fasr_filter_mark:after{
  border-radius: 50%;
    content: '';
    width: 8px;
    height: 8px;
    background: #ff0000;
    display: inline-block;
    position: absolute;
    top: 4px;
  right: -2px;
}
</style>
